Atualização 7 - Alinhando a estruturas do ambiente do usuário

2024-10-17 17:46:20 -03:00 · 2024-10-17 17:46:20 -03:00 · 7196ff16ef
parent 4c54f21b32
commit 7196ff16ef
28 changed files with 2227 additions and 689 deletions
--- a/Acessts/Imagens/Iconis/lupa.png
+++ b/Acessts/Imagens/Iconis/lupa.png
--- a/Ambiente_Usuario_copy.html
+++ b/Ambiente_Usuario_copy.html
@ -8,27 +8,32 @@
    <meta http-equiv="Feature-Policy"
        content="geolocation 'none'; microphone 'none'; camera 'none'; fullscreen 'none'; payment 'none'; vr 'none'; autoplay 'none'; accelerometer 'none'; ambient-light-sensor 'none'; gyroscope 'none'; magnetometer 'none';picture-in-picture  'none';sync-xhr 'none'; usb 'none';clipboard-write  'none'; clipboard-read  'none'; payments  'none';  ">

-    <link id="conexao" rel="stylesheet" href="../Css/page/Telas_acao/load.css">
+    <link id="conexao" rel="stylesheet" href="./Css/page/Telas_acao/erro_404.css">
+    <link rel="stylesheet" href="./Css/page/Telas_acao/load.css">
    <link rel="icon" type="image/x-icon" href="./Acessts/Imagens/iT_Guys/logo1.png">
    <link rel="stylesheet" href="./Css/page/Telas_acao/erro_404.css">
    <style id="fundouser">
    </style>
    <title>Ambiente do Usuario</title>
+
+    <script defer src="./js/Ambiente/Estrutura/load.js"></script>
+
+
 </head>

-<body>

+<body class="estrutura">

+    <div id="entrada_2">
+
+    </div>

-    <!-- Seu conteúdo principal aqui -->
    <main id="entrada_1">

    </main>

+</body>

-    <!--padrao_A1 reponsavel ter toda a estrutura que aplicara o data na tela-->
-    <script src="./js/padrao_A1.js"></script>
-    <script src="./js/Ambiente/Monitoramento/Estrutura_Secundaria_Monitor.js"></script>
-    <script src="./js/Ambiente/Estrutura/load.js"></script>
+<script defer src="./js/Ambiente/Estrutura/Estrutura_primaria.js"></script>

 </html>
--- a/Css/page/Ambiente/Estrutura/estrutura.css
+++ b/Css/page/Ambiente/Estrutura/estrutura.css
@ -0,0 +1,12 @@
+@import url(./estrutura_menu.css);
+@import url(./menu_hover.css);
+@import url(./sec_cap_1.css);
+@import url(./sec_cap_2.css);
+@import url(./tela_hover.css);
+
+@import url(../../../../Css/global/import.css);
+
+.estrutura {
+    display: flex;
+    align-items: center;
+}
--- a/Css/page/Ambiente/Estrutura/estrutura_menu.css
+++ b/Css/page/Ambiente/Estrutura/estrutura_menu.css
@ -0,0 +1,254 @@
+.menu_lateral {
+
+    width: 3.6vw;
+    height: 100vh;
+    transition: 1s ease;
+    position: fixed;
+    z-index: 10;
+
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+}
+
+.seguimentacao_1 {
+    width: 3.6vw;
+    height: 100vh;
+    background-color: var(--Cor_Segundaria_5_1);
+
+    display: flex;
+    flex-direction: column;
+
+}
+
+.seguimentacao_1 .coluna_1 {
+
+    width: 100%;
+    height: 10vh;
+    display: flex;
+    align-items: start;
+    justify-content: center;
+    transition: 1s ease;
+
+
+}
+
+.seguimentacao_1 .coluna_1 .subcolunas_1 {
+    margin-top: 2vh;
+
+}
+
+.seguimentacao_1 .coluna_1 .subcolunas_1 img {
+    width: 2.3vw;
+    filter: drop-shadow(2px 5px 0px var(--Cor_Segundaria_5_2));
+
+}
+
+
+.seguimentacao_1 .coluna_2 {
+
+
+    width: 100%;
+    height: 90vh;
+    display: flex;
+    flex-direction: column;
+    transition: 1s ease;
+    transition: 1s ease;
+}
+
+.img {
+    width: 1.8vw;
+    filter: drop-shadow(2px 5px 0px var(--Cor_Segundaria_5_2));
+}
+
+
+.seguimentacao_1 .coluna_2 .subcolunas_1 {
+    width: 100%;
+    height: 70vh;
+    transition: 1s ease;
+
+
+}
+
+.seguimentacao_1 .coluna_2 .subcolunas_2 {
+    width: 100%;
+    height: 20vh;
+    transition: 1s ease;
+
+
+}
+
+.seguimentacao_2 {
+    width: 0vw;
+
+    height: 100vh;
+    background-color: var(--Cor_Segundaria_5_1);
+    overflow: hidden;
+    transition: 1s ease;
+    display: flex;
+    flex-direction: column;
+}
+
+.seguimentacao_2 .coluna_1 {
+    width: 100%;
+    height: 30vh;
+
+    display: flex;
+    flex-direction: row;
+
+    background-image: url(../../../../Acessts/Imagens/1605305486169.jpg);
+    background-position: center;
+    background-size: cover;
+
+    overflow: hidden;
+    transition: 1s ease;
+}
+
+.seguimentacao_2 .coluna_1 .subcolunas_1 {
+    width: 25vw;
+    height: 30vh;
+    background-color: rgba(0, 0, 0, 0.341);
+    backdrop-filter: blur(3px);
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    align-content: center;
+
+}
+
+.seguimentacao_2 .coluna_1 .subcolunas_1 .filheira {
+    font-family: var(--font_titulo);
+    color: var(--Matriz);
+    font-size: 0vw;
+    filter: blur(5px);
+
+
+    opacity: 0;
+    text-align: center;
+    transition: 1s ease;
+
+}
+
+
+.seguimentacao_2 .subcolunas_1 .filheira img {
+    width: 0vw;
+    opacity: 0;
+    filter: blur(5px);
+    border-radius: 100%;
+    transition: 1s ease;
+}
+
+.seguimentacao_2 .coluna_1 .subcolunas_1 .filheira h2 {
+    margin-bottom: -2vh;
+}
+
+
+.seguimentacao_2 .coluna_1 .subcolunas_2 {
+
+    width: 5vw;
+    height: 30vh;
+
+    background-color: #12365552;
+    backdrop-filter: blur(8px);
+
+    display: flex;
+    justify-content: center;
+    align-items: start;
+
+}
+
+.subcolunas_2 button {
+    background: none;
+    outline: none;
+    border: none;
+
+    margin-top: 2vh;
+    margin-right: 0.5vw;
+    background-color: #c6c6c6;
+
+    width: 3vw;
+    height: 4vh;
+
+    font-family: var(--font_titulo);
+    color: var(--Matriz);
+    font-size: 0.9vw;
+    text-align: center;
+
+    box-shadow: -5px 5px 0px 2px #9a9a9a;
+    transition: 1s ease;
+
+}
+
+.imgjust {
+    width: 1vw;
+    transition: 1s ease;
+}
+
+
+
+.seguimentacao_2 .coluna_2 {
+    width: 96.1%;
+    height: 70vh;
+
+    padding-left: 0.3vw;
+    padding-right: 0.5vw;
+    display: flex;
+    flex-direction: column;
+}
+
+.seguimentacao_2 .coluna_2 .subcolunas_1 {
+    width: 100%;
+    height: 50vh;
+
+}
+
+.filheira_a {
+    text-decoration: none;
+    color: var(--Matriz);
+}
+
+.seguimentacao_1 .coluna_2 .subcolunas_1 .filheira {
+    display: flex;
+    justify-content: center;
+}
+
+.seguimentacao_1 .coluna_2 .subcolunas_1 .filheira,
+.seguimentacao_2 .coluna_2 .subcolunas_1 .filheira {
+    width: 100%;
+    height: 4vh;
+    margin-top: 2vh;
+
+    display: flex;
+    align-items: center;
+
+    font-family: var(--font_titulo);
+
+    font-size: 0.6vw;
+    transition: 1s ease;
+}
+
+.seguimentacao_2 .coluna_2 .subcolunas_2 {
+    width: 100%;
+    height: 20vh;
+}
+
+.seguimentacao_1 .coluna_2 .subcolunas_2 .filheira {
+    display: flex;
+    justify-content: center;
+}
+
+.seguimentacao_1 .coluna_2 .subcolunas_2 .filheira,
+.seguimentacao_2 .coluna_2 .subcolunas_2 .filheira {
+    width: 100%;
+    height: 4vh;
+    margin-top: 2vh;
+
+    display: flex;
+    align-items: center;
+
+    font-family: var(--font_titulo);
+
+    font-size: 0.6vw;
+    transition: 1s ease;
+}
--- a/Css/page/Ambiente/Estrutura/menu_hover.css
+++ b/Css/page/Ambiente/Estrutura/menu_hover.css
@ -0,0 +1,151 @@
+.menu_lateral:hover {
+
+    width: 20vw;
+    position: fixed;
+    z-index: 10;
+    left: 0;
+    top: 0;
+    transition: 1s ease;
+
+    .seguimentacao_2 {
+        width: 17vw;
+        transition: 1s ease;
+    }
+
+    .seguimentacao_1 .coluna_1 {
+        height: 30vh;
+
+        transition: 1s ease;
+    }
+
+    .seguimentacao_1 .coluna_2 {
+        height: 70vh;
+        transition: 1s ease;
+    }
+
+    .seguimentacao_1 .coluna_2 .subcolunas_1 {
+        height: 50vh;
+        transition: 1s ease;
+    }
+
+    .seguimentacao_1 .coluna_2 .subcolunas_2 {
+        height: 20vh;
+        transition: 1s ease;
+    }
+
+    .seguimentacao_2 .coluna_1 .subcolunas_1 .filheira {
+
+        font-size: 0.9vw;
+        opacity: 1;
+        filter: blur(0px);
+        transition: 1s ease;
+
+    }
+
+
+    .seguimentacao_2 .subcolunas_1 .filheira img {
+        width: 6vw;
+        height: 10vh;
+        opacity: 1;
+        filter: blur(0px);
+
+        transition: 1s ease;
+    }
+
+
+}
+
+
+.menu_lateral.expansao {
+
+
+    width: 20vw;
+    transition: 1s ease;
+
+    .seguimentacao_2 {
+        width: 17vw;
+        transition: 1s ease;
+    }
+
+    .seguimentacao_1 .coluna_1 {
+        height: 30vh;
+        transition: 1s ease;
+    }
+
+    .seguimentacao_1 .coluna_2 {
+        height: 70vh;
+        transition: 1s ease;
+    }
+
+    .seguimentacao_1 .coluna_2 .subcolunas_1 {
+        height: 50vh;
+        transition: 1s ease;
+    }
+
+    .seguimentacao_1 .coluna_2 .subcolunas_2 {
+        height: 20vh;
+        transition: 1s ease;
+    }
+
+    .seguimentacao_2 .coluna_1 .subcolunas_1 .filheira {
+
+        font-size: 0.9vw;
+        opacity: 1;
+        filter: blur(0px);
+        transition: 1s ease;
+
+    }
+
+
+    .seguimentacao_2 .subcolunas_1 .filheira img {
+        width: 6vw;
+        height: 10vh;
+        opacity: 1;
+        filter: blur(0px);
+
+        transition: 1s ease;
+    }
+
+    .imgjust {
+        transform: rotate(180deg);
+        transition: 1s ease;
+    }
+
+
+}
+
+
+a:hover {
+    color: var(--Cor_Segundaria_5_1);
+
+}
+
+.seguimentacao_2 .coluna_2 .subcolunas_1 .filheira:hover {
+
+    background-color: var(--Matriz);
+    border-radius: 2vw 0vw 0vw 2vw;
+    padding-left: 2vw;
+    transition: 1s ease;
+
+}
+
+
+
+.seguimentacao_2 .coluna_2 .subcolunas_2 .filheira:hover {
+
+    background-color: var(--Matriz);
+    border-radius: 2vw 0vw 0vw 2vw;
+    padding-left: 2vw;
+    transition: 1s ease;
+
+
+
+}
+
+.subcolunas_2 button:hover {
+    margin-right: 1vw;
+
+    background-color: var(--Cor_Segundaria_2_1);
+    box-shadow: 5px 5px 0px 2px var(--Cor_Segundaria_2_2);
+    transition: 1s ease;
+}
--- a/Css/page/Ambiente/Estrutura/sec_cap_1.css
+++ b/Css/page/Ambiente/Estrutura/sec_cap_1.css
@ -0,0 +1,101 @@
+/* ------------------- 
+Estrutura de apresentação, possuindo a tela iframe, e cabeçario com o logo e o logout
+-------------------------- */
+
+/* ------------------- 
+Cabeçario da tela 
+-------------------------- */
+
+
+.capitulo_1 {
+    width: 96.4vw;
+    height: 10vh;
+    background-color: var(--Cor_Segundaria_5_1);
+
+    position: fixed;
+    right: 0;
+    top: 0;
+    z-index: 1;
+
+    display: flex;
+    flex-direction: row;
+    align-content: center;
+    align-items: center;
+    justify-content: space-between;
+    transition: 1s ease;
+
+
+}
+
+.companyLogo {
+    width: 14vw;
+    margin-left: 2vw;
+}
+
+.Bloco_subcab1_2 {
+
+    display: flex;
+    flex-direction: row;
+    padding-right: 2vw;
+    align-content: center;
+    align-items: center;
+
+}
+
+.Bloco_subcab1_2 button {
+    width: 10vw;
+    height: 5vh;
+    font-family: var(--font_titulo);
+    font-size: 1vw;
+
+    outline: none;
+    border: none;
+    background: none;
+
+    background-color: var(--Matriz);
+    color: var(--Cor_Segundaria_5_1);
+    transition: 1s ease;
+}
+
+.Bloco_subcab1_2 button:hover {
+
+    border-left: 0.2vw solid var(--Matriz);
+    border-right: 0.2vw solid var(--Matriz);
+    border-top: 0.2vw solid var(--Matriz);
+    border-bottom: 0.2vw solid var(--Matriz);
+
+    background-color: var(--Cor_Segundaria_5_1);
+    color: var(--Matriz);
+    transition: 1s ease;
+}
+
+
+.cabecario_2 {
+    width: 73%;
+    display: flex;
+    flex-direction: row;
+    align-content: center;
+    align-items: center;
+    justify-content: space-between;
+    background-color: var(--Matriz);
+    height: 10vh;
+}
+
+.Bloco_subcab2_1 {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    align-content: center;
+    justify-content: space-around;
+    width: 8vw;
+}
+
+.Bloco_subcab2_1 .icon_subcab1_1 {
+    width: 3vw;
+}
+
+
+
+.Bloco_subcab2_2 .icon_subcab2_1 {
+    width: 2.5vw;
+}
--- a/Css/page/Ambiente/Estrutura/sec_cap_2.css
+++ b/Css/page/Ambiente/Estrutura/sec_cap_2.css
@ -0,0 +1,32 @@
+/*--------------
+Tela de apresentação de conteudo
+------------------*/
+
+
+.capitulo_2 {
+    width: 96.4vw;
+    height: 90vh;
+    position: fixed;
+    right: 0;
+    top: 10vh;
+    z-index: -1;
+    transition: 1s ease;
+}
+
+.transmissão {
+    width: 100%;
+    height: 100%;
+
+
+    transition: 1s ease;
+}
+
+
+
+.Corpo_2 .Colunas_1 .transmissão.expansao {
+
+    width: 81vw;
+    height: 82vh;
+    transition: 1s ease;
+
+}
--- a/Css/page/Ambiente/Estrutura/tela_hover.css
+++ b/Css/page/Ambiente/Estrutura/tela_hover.css
@ -0,0 +1,11 @@
+.capitulo_1.expansao {
+    width: 80vw;
+    z-index: 1;
+    transition: 1s ease;
+}
+
+.capitulo_2.expansao {
+    width: 80vw;
+    z-index: 1;
+    transition: 1s ease;
+}
--- a/Css/page/Ambiente/Service/Ferramentas.css
+++ b/Css/page/Ambiente/Service/Ferramentas.css
@ -0,0 +1,4 @@
+@import url(../../../global/import.css);
+@import url(./sec_cap_1.css);
+@import url(./sec_cap_2.css);
+@import url(./pop_up.css);
--- a/Css/page/Ambiente/Service/pop_up.css
+++ b/Css/page/Ambiente/Service/pop_up.css
@ -0,0 +1,71 @@
+.popup_contener {
+    display: none;
+    position: fixed;
+    top: 10vh;
+    left: 20vw;
+    padding: 2vw;
+
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    align-content: center;
+
+    width: 50vw;
+    height: 70vh;
+    background-color: var(--Cor_Segundaria_5_1);
+    box-shadow: 10px 10px 0px var(--Cor_Segundaria_5_2);
+    animation: surgirpopupcenter 1s ease;
+}
+
+@keyframes surgirpopupcenter {
+    to {
+        opacity: 1;
+        transform: scale(1);
+
+    }
+
+    from {
+        opacity: 0;
+        transform: scale(0);
+    }
+
+}
+
+.colun_1 {
+    width: 50vw;
+    height: 8vh;
+    display: flex;
+    align-items: center;
+    align-content: center;
+    justify-content: start;
+}
+
+.colun_1 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;
+}
+
+.colun_1 button:hover {
+    background-color: var(--Cor_Segundaria_2_1);
+    box-shadow: -5px 5px 0px var(--Cor_Segundaria_2_2);
+}
+
+.colun_2 {
+    width: 50vw;
+    height: 62vh;
+
+    display: flex;
+    align-items: center;
+    align-content: center;
+    justify-content: center;
+    overflow: hidden;
+}
--- a/Css/page/Ambiente/Service/sec_cap_1.css
+++ b/Css/page/Ambiente/Service/sec_cap_1.css
@ -0,0 +1,62 @@
+.capitulo_1 {
+    width: 100%;
+    height: 20vh;
+    display: flex;
+    flex-direction: row;
+    justify-content: end;
+    align-items: center;
+    align-content: center;
+    margin-bottom: 2vh;
+
+}
+
+
+.campo {
+    width: 70;
+    height: 10vh;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: end;
+    padding-right: 2vw;
+    gap: 2vw;
+}
+
+.campo input {
+    border: none;
+    outline: none;
+    background: none;
+
+
+    border: 0.2vw solid var(--Cor_Segundaria_2_1);
+    box-shadow: 5px 5px 0px 2px var(--Cor_Segundaria_2_2);
+    font-size: 2vw;
+    color: var(--Cor_Segundaria_2_1);
+    padding-left: 1vw;
+    padding-right: 1vw;
+
+    width: 50vw;
+    height: 8vh;
+}
+
+.campo button {
+    border: none;
+    outline: none;
+    background: none;
+    background-color: #c6c6c6;
+    box-shadow: 5px 5px 0px #9a9a9a;
+    transition: 1s ease;
+
+    width: 6vw;
+    height: 8vh;
+}
+
+.campo img {
+    width: 3vw;
+}
+
+.campo button:hover {
+    background-color: var(--Cor_Segundaria_2_1);
+    box-shadow: -5px 5px 0px 2px var(--Cor_Segundaria_2_2);
+
+}
--- a/Css/page/Ambiente/Service/sec_cap_2.css
+++ b/Css/page/Ambiente/Service/sec_cap_2.css
@ -0,0 +1,46 @@
+.capitulo_2 {
+    width: 100vw;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-wrap: wrap;
+    gap: 2vw;
+}
+
+.capitulo_2 .painel {
+    width: 20vw;
+    height: 40vh;
+
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    align-content: center;
+    justify-content: center;
+
+    background-color: #c6c6c6;
+    box-shadow: -5px 5px 0px #9a9a9a;
+    transition: 1s ease;
+
+
+}
+
+.capitulo_2 .painel:hover {
+
+    background-color: var(--Cor_Segundaria_5_1);
+    box-shadow: 10px 10px 0px var(--Cor_Segundaria_5_2);
+
+}
+
+.capitulo_2 .painel .Colun_1 img {
+    width: 8vw;
+    filter: drop-shadow(2px 2px 0px var(--Cor_Segundaria_2_1));
+}
+
+.capitulo_2 .painel .Colun_2 {}
+
+
+.capitulo_2 .painel .Colun_2 h2 {
+    font-size: 1.3vw;
+    color: var(--Matriz);
+    font-family: var(--font_titulo);
+}
--- a/Css/page/Telas_acao/load.css
+++ b/Css/page/Telas_acao/load.css
@ -1,16 +1,27 @@
-body,
-html {
-    margin: 0;
-    padding: 0;
-    height: 100%;
-    width: 100%;
-    overflow: hidden;
-    background-color: #282c34;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
+@import url(../../global/import.css);
+
+.teste {
+    background-color: rgb(255, 255, 255);
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 100000;
+    width: 100%;
+    height: 100vh;
+
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    align-content: center;
+
+    font-family: var(--font_titulo);
+

-canvas {
    border: 1px solid #fff;
 }
+
+.teste canvas {
+    width: 40vw;
+    height: 40vh;
+}
--- a/html/arquivos_extras/Ambiente_Usuario
+++ b/html/arquivos_extras/Ambiente_Usuario
@ -0,0 +1,209 @@
+<!DOCTYPE html>
+<html lang="pt-br">
+
+<head>
+    <title>Ambiente de teste</title>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta http-equiv="Feature-Policy"
+        content="geolocation 'none'; microphone 'none'; camera 'none'; fullscreen 'none'; payment 'none'; vr 'none'; autoplay 'none'; accelerometer 'none'; ambient-light-sensor 'none'; gyroscope 'none'; magnetometer 'none';picture-in-picture  'none';sync-xhr 'none'; usb 'none';clipboard-write  'none'; clipboard-read  'none'; payments  'none';  ">
+
+    <link id="conexao" rel="stylesheet" href="../../Css/page/Ambiente/Estrutura/estrutura.css">
+    <link rel="icon" type="image/x-icon" href="./Acessts/Imagens/iT_Guys/logo1.png">
+    <style id="fundouser">
+    </style>
+
+</head>
+
+<body class="estrutura">
+
+
+    <nav>
+        <section class="menu_lateral">
+
+            <div class="seguimentacao_1">
+                <div class="coluna_1"> <!--imagem de fundo-->
+                    <div class="subcolunas_1">
+
+                        <div class="filheira">
+                            <img src="../../Acessts/Imagens/iT_Guys/Logo_itGuys - Copia.png" alt="">
+                            <!--Iconi da Itguys-->
+                        </div>
+
+                    </div>
+                </div>
+
+                <div class="coluna_2">
+                    <div class="subcolunas_1">
+
+                        <div class="filheira">
+                            <img class="img" src="../../Acessts/Imagens/Iconis/home.png" alt="">
+                        </div><!--Home-->
+
+                        <div class="filheira">
+                            <img class="img" src="../../Acessts/Imagens/Iconis/monitor.png" alt="">
+                        </div><!--Monitoramento-->
+
+                        <div class="filheira">
+                            <img class="img" src="../../Acessts/Imagens/Iconis/technical-support.png" alt="">
+                        </div><!--Servicdesk-->
+
+                        <div class="filheira">
+                            <img class="img" src="../../Acessts/Imagens/Iconis/caixa-de-ferramentas.png" alt="">
+                        </div><!--Ferramentas-->
+
+
+                    </div>
+                    <div class="subcolunas_2">
+
+                        <div class="filheira">
+                            <img class="img" src="../../Acessts/Imagens/Iconis/central-de-atendimento.png" alt="">
+                        </div><!--Suporte-->
+
+                        <div class="filheira">
+                            <img class="img" src="../../Acessts/Imagens/Iconis/engrenagem - Copia.png" alt="">
+                        </div><!--Configurações-->
+
+                    </div>
+                </div>
+            </div>
+
+            <div class="seguimentacao_2">
+
+                <div class="coluna_1"> <!--imagem de fundo-->
+                    <div class="subcolunas_1">
+                        <div class="filheira">
+                            <img src="../../Acessts/Imagens/Iconis/profile-user.png" alt=""> <!--Usuário de fundo-->
+                        </div>
+                        <div class="filheira">
+                            <h2>Usuário</h2>
+                            <h2>Empresa</h2>
+                        </div>
+
+                    </div>
+                    <div class="subcolunas_2">
+                        <button class="id_ajuste" id="id_ajuste">
+                            <img class="imgjust" src="../../Acessts/Imagens/Iconis/seta-direita.png" alt="">
+                        </button>
+
+                    </div>
+                </div>
+
+                <div class="coluna_2">
+                    <div class="subcolunas_1">
+
+                        <a href="" class="filheira_a" target="frame">
+                            <div class="filheira">
+                                <h2>Home</h2>
+                            </div>
+                        </a>
+
+                        <a href="" class="filheira_a" target="frame">
+                            <div class="filheira">
+
+                                <h2>Monitoramento</h2>
+                            </div>
+                        </a>
+
+                        <a href="" class="filheira_a" target="frame">
+                            <div class="filheira">
+
+
+                                <h2>Servicdesk</h2>
+                            </div>
+                        </a>
+
+                        <a href="" class="filheira_a" target="frame">
+                            <div class="filheira">
+
+
+                                <h2>Ferramentas</h2>
+                            </div>
+                        </a>
+
+                    </div>
+
+                    <div class="subcolunas_2">
+
+                        <a href="" class="filheira_a" target="frame">
+                            <div class="filheira">
+
+
+                                <h2>Suporte</h2>
+                            </div>
+                        </a>
+
+                        <a href="" class="filheira_a">
+                            <div class="filheira">
+
+
+                                <h2>Configurações</h2>
+                            </div>
+                        </a>
+                    </div>
+
+                </div>
+
+            </div>
+        </section>
+    </nav>
+
+
+    <!-- Seu conteúdo principal aqui -->
+    <main class="apresentacao">
+
+        <section class="capitulo_1">
+            <div class="Bloco_subcab1_1">
+                <img src="../../Acessts/Imagens/iT_Guys/logo_flat.png" alt="" class="icon_subcab1_1">
+            </div>
+
+            <div class="Bloco_subcab1_2">
+                <a href="https://dev.itguys.com.br/"><button>Logout</button></a>
+            </div>
+
+        </section>
+
+        <section class="capitulo_2">
+
+
+
+            <iframe id="test1" name="frame" class="transmissão" src="../../Ambiente_Usuario_copy.html"
+                frameborder="0"></iframe>
+
+
+
+
+        </section>
+    </main>
+
+
+    <script>
+
+        var botao = document.querySelector('#id_ajuste')
+        var cabecario = document.querySelector('.capitulo_1')
+        var tela = document.querySelector('.capitulo_2')
+        var menu = document.querySelector('.menu_lateral')
+        //var temas = document.querySelectorAll('.item_menu')
+
+
+        //Aqui se aplica o evento de cliente, sobre afunção que aplica as classes no menu caberio e telas
+        botao.addEventListener('click', function () {
+            menu.classList.toggle('expansao');
+            cabecario.classList.toggle('expansao');
+            tela.classList.toggle('expansao');
+
+        });
+
+        function selectLink() {
+            temas.forEach((item) =>
+                item.classList.remove('ativo')
+            )
+            this.classList.add('ativo')
+        }
+        temas.forEach((item) =>
+            item.addEventListener('click', selectLink))
+
+    </script>
+
+</html>
--- a/html/arquivos_extras/Ambiente_Usuario.html
+++ b/html/arquivos_extras/Ambiente_Usuario.html
--- a/html/arquivos_extras/Ambiente_teste.html
+++ b/html/arquivos_extras/Ambiente_teste.html
--- a/html/arquivos_extras/tes.html
+++ b/html/arquivos_extras/tes.html
--- a/html/projetos_itguys.html
+++ b/html/projetos_itguys.html
@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="pt-BR">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Formulário</title>
+    <link rel="stylesheet" href="../Css/page/Ambiente/Service/Ferramentas.css">
+</head>
+
+<body>
+
+    <main>
+        <section class="capitulo_1">
+            <div class="campo">
+                <input type="text" id="pesquisa" placeholder="Pesquisar serviços...">
+                <button id="button_pesqui">
+                    <img src="../Acessts/Imagens/Iconis/lupa.png" alt="">
+                </button>
+            </div>
+        </section>
+
+        <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>
+</body>
+
+</html>
--- a/js/Ambiente/Estrutura/Estrutura_Primaria.js
+++ b/js/Ambiente/Estrutura/Estrutura_Primaria.js
@ -1,216 +1,526 @@


-//Varivel para valida a autenticação do usuário, se for true o ambiente é construido, se for false, um tela de erro é apresentada no lugar do ambiente, e caso a resposta demore para ser apresentada um tela de carregamento é apresentada.
-var autenteticação = true;
-
-//If que constrola o cenario de true
-if (autenteticação == true) {
-
-    //constante que controla o estilo css que está estilizando todo o ambiente do usuário.
-    const estilos = document.getElementById('conexao');
-    estilos.href = '../Css/global/Estrutura.css';
-
-    //variaveis de conexão de informações, possuindo informações algumas informaçõe sendo elas:
-    //Nome do usuário
-    //Nome da empresa
-    //Imagem do usuário
-    //Imagem de fundo do usuário
-    var Usuário = 'Daivid';
-    var Empresa = 'ItGuys';
-    var ImagemUser = '../Acessts/Imagens/1605305486169.jpg';
-    var imagemFun = 'url(../Acessts/Imagens/01160209321024.jpg)';
-
-    //Essa ultima variavel é dedicada ao controle de hiriaquia, caso alguem tenha permissão para visualizar essa categoria, será true, caso ela não tenha permissão, será false, e então toda essa categoria não será apresentada.
-    var visuMonitor = true;
-
-
-    //constante conectada com estilos internos dentro do próprio html, para trazer a capacidade de controlar a imagem que está no fundo do perfil do suário.
-    const fundouser = document.getElementById('fundouser');
-
-    fundouser.innerHTML =
-        '.Corpo_1 .Colunas_1 {'
-        +
-        'display: flex;'
-        +
-        'flex-direction: row;'
-        +
-        'background-image:' + imagemFun + ';'
-        +
-        'background-position: center;'
-        +
-        'background-size: cover;'
-        +
-        'width: 15vw;'
-        +
-        'height: 10vh;'
-        +
-        'overflow: hidden;'
-        +
-        'transition: 1s ease;'
-        ;
-
-    //Constante de construção primira do ambiente do usuário, é aqui onde toda á página é construida, ao mesmo tempo que as variaveis mudificam certas informações.
-    const construtor_primario = document.getElementById('entrada_1');
-
-    construtor_primario.innerHTML =
-        '<section class="menu">'
-        +
-        '<header class="cabecario_1">'
-        +
-        '<div class="Bloco_subcab1_1"><img src="../Acessts/Imagens/iT_Guys/logo_flat.png" alt="" class="icon_subcab1_1"></div>'
-        +
-        '<div class="Bloco_subcab1_2"><a href="https://dev.itguys.com.br/"><button>Logout</button></a></div>'
-        +
-        '</header>'
-        +
-        '</section>'
-        +
-        '<main class="matriz">'
-        +
-        '<section class="capitulo_1">'
-        +
-        '<div class="Corpo_1">'
-        +
-        '<div class="Colunas_1">'
-        +
-        '<div class="seguimentos_1"><button><img id="menu" src="../Acessts/Imagens/Iconis/seta-direita.png" alt=""></button></div>'
-        +
-        '<div class="seguimentos_2">'
-        +
-        '<div class="user_1">'
-        +
-        '<img src="' + ImagemUser + '" alt="" class="icon_subcab2_2">'
-        +
-        '<img src="' + ImagemUser + '" alt="" class="icon_subcab2_1">'
-        +
-        '</div>'
-        +
-        '<div class="user_2"><p> <div id="User">' + Usuário + '</div><div id="Empresa">' + Empresa + '</div></p></div>'
-        +
-        '</div>'
-        +
-        '</div>'
-        +
-        '<div class="Colunas_2">'
-        +
-        '<div class="seguimentos_1"></div>'
-        +
-        '<div class="seguimentos_2"><div class="sessao_1"><a href="./Home.html" target="frame">'
-        +
-        '<div class="item_menu"><img src="../Acessts/Imagens/Iconis/home.png" alt=""><p>Home</p></div></a>'
-        +
-        '<section class="forg">'
-        +
-        //Estrutura vaizia dedicada para aparesentação do painel de monitoramento caso o usuário tenha permissão para o visualizar.
-        '<div id="sub_entrada"></div>'
-        +
-        '</section>'
-        +
-        '<a href="http://10.10.253.111/"><div class="item_menu"><img src="../Acessts/Imagens/Iconis/technical-support.png" alt=""><p>Servicedesk</p></div></a>'
-        +
-        '</div>'
-        +
-        '<div class="sessao_2">'
-        +
-        '<a href="https://api.whatsapp.com/send?phone=5521966344698"><div class="item_menu"><img src="../Acessts/Imagens/Iconis/central-de-atendimento.png" alt=""><p>Suporte</p></div></a>'
-        +
-        '<a href="./Config.html" ><div class="item_menu"><img src="../Acessts/Imagens/Iconis/engrenagem - Copia.png" alt=""><p>Configuracões</p></div></a>'
-        +
-        ' </div>'
-        +
-        '</section>'
-        +
-        '<section class="capitulo_2">'
-        +
-        '<div class="Corpo_2">'
-        +
-        '<div class="Colunas_1"><iframe id = "test1" name = "frame" class="transmissão" src = "./Home.html"frameborder = "0" ></iframe ></div>'
-        +
-        '</div>'
-        +
-        '</main>'
-        ;
-
-    //Construtores responsavels sobre a construção de alguns scripts que não são default, que só atendem o ambiente do usuário.
-
-    //construtor da reação do menu sobre as interações do usuário
-    const script1 = document.createElement('script');
-    script1.src = '../js/Ambiente/Estrutura/Reacao_menu.js';
-    document.body.appendChild(script1);
-
-    //construtor da sub camada de construção, alinhada sobre a condicional onde se a pessoa possui permisão para visualizar o monitoramente de sua empresa, visuMonitor será igual á true, enquanto se ela não tiver permissão para visualizar o visuMonitor será igual á false
-    if (visuMonitor == true) {
-        const script2 = document.createElement('script');
-        script2.src = './js/Ambiente/Monitoramento/Estrutura_Secundaria_Monitor.js';
-        document.body.appendChild(script2);
-    };
-

+// Função para obter a URL base da API
+async function getApiUrl() {
+    try {
+        const response = await fetch('../../../Sites/Site_ItGuys/php/config_url.php'); // Solicita a URL base do PHP
+        if (!response.ok) {
+            throw new Error('Network response was not ok');
+        }
+        const data = await response.json();
+        return data.apiUrl; // Retorna a URL base
+    } catch (error) {
+        console.error('Error fetching API URL:', error);
+        throw error;
+    }
 }

-//Else sendo a reação opostao ao do if, logo sendo esse o cenario onde a autenticação não seja valida.
-else {
-
-    //Constante de controle sobre estilos css do painel de erro. 
-    const estilos = document.getElementById('conexao');
-    estilos.href = '../Css/page/Telas_acao/erro_404.css';
-
-    //variaveis de conexão de informações, possuindo informações algumas informaçõe sendo elas:
-    //o Status do erro 
-    //Mensagem do erro
-    //Um mensagem complementar sobre o erro
-    var Status = 'Erro 404';
-    var mensagem = 'Desculpe mas sua página não foi encontrada';
-    var sub_mensagem = 'Tente fazer seu, login novamente';
-
-    //Constante usada para a criação da estrutura, sendo usada para apresentar todo o painel
-    const erro = document.getElementById('entrada_1');
-
-    erro.innerHTML = '<section class="matriz_404" id="cap">'
-        +
-        '<section class="paineis_1"><div class="cap"><h1>' + Status + '</h1></div></section>'
-        +
-        '<section class="paineis_2">'
-        +
-        '<div class="cap"><h2>' + mensagem + '</h2><p>' + sub_mensagem + '</p></div>'
-        +
-        '<div class="cap_2"><a href="https://dev.itguys.com.br/ambiente_do_usu%C3%A1rio/login.html"><button>Retornar</button></a></div>'
-        +
-        '</section>'
-        +
-        '<div class="wave wave_1"></div>'
-        +
-        '<div class="wave wave_2"></div>'
-        +
-        '<div class="wave wave_3"></div>'
-        +
-        '<div class="wave wave_4"></div>'
-        +
-        '</section>'
-        ;
-
-
-
-
+// Função para obter o token do localStorage
+function getAuthToken() {
+    return localStorage.getItem('x-access-token');
 }


-// Event listener para o botão de logout
-const logoutButton = document.getElementById('logoutButton');
-if (logoutButton) {
-    logoutButton.addEventListener('click', function () {
-        // Limpar o token do localStorage ao clicar no botão de logout
-        clearAuthToken();
-        // Redirecionar para a página de login ou qualquer outra página desejada após o logout
-        window.location.href = '../login.html';
-    });
+const Permissoes = {
+    visuMonitor: true,
+};
+
+
+
+// Função para carregar uma imagem protegida com token JWT e exibi-la
+
+// Função para carregar e exibir as imagens protegidas
+async function criarBlocos() {
+    try {
+        const apiUrl = await getApiUrl();  // Obtém a URL da API a partir do PHP
+        const token = getAuthToken();      // Obtém o token JWT do localStorage
+
+        // Faz uma requisição para obter os dados da rota /mounting
+        const response = await fetch(`${apiUrl}/mounting`, {
+            method: 'GET',
+            headers: {
+                'Content-Type': 'application/json',
+                'x-access-token': token ? token : ''
+            }
+        });
+
+        if (!response.ok) {
+            throw new Error('Erro na requisição: ' + response.statusText);
+
+        }
+
+        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;
+        const Empresa = data.empresa.nome;
+        const ImagemUser = `${apiUrl}${data.usuario.img_perfil}`;
+        //const ImagemUser2 = `${apiUrl}${data.usuario.img_perfil}`;
+        const logoEmpresa = `${apiUrl}${data.empresa.logo}`;
+
+
+
+
+        // Exibe as imagens protegidas usando os URLs retornados pela API
+        loadImage(ImagemUser, 'profileImage');
+        //loadImage(ImagemUser2, 'profileImage');  // Imagem de perfil do usuário
+        loadImage(logoEmpresa, 'companyLogo'); // Logo da empresa
+
+        // Acessando o primeiro objeto do array retornado
+
+        console.log(data);
+        console.log(primeiroNome);
+        console.log(Empresa);
+        console.log(ImagemUser);
+        console.log(logoEmpresa);
+
+
+        //var visuMonitor = usuarioInfo.Permissoes_Monitor;
+
+
+        //constante que controla o estilo css que está estilizando todo o ambiente do usuário.
+        const estilos = document.getElementById('conexao');
+        estilos.href = './Css/page/Ambiente/Estrutura/estrutura.css';
+
+
+        const construtor_primario = document.getElementById('entrada_1');
+
+        construtor_primario.innerHTML =
+            '<nav>'
+            +
+            '<section class="menu_lateral">'
+            +
+            '<div class="seguimentacao_1">'
+            +
+            '<div class="coluna_1">'
+            +
+            '<div class="subcolunas_1">'
+            +
+            '<div class="filheira">'
+            +
+            '<img src="./Acessts/Imagens/iT_Guys/Logo_itGuys - Copia.png" alt="">'
+            +
+            '</div>'
+            +
+            '</div>'
+            +
+            '</div>'
+            +
+            '<div class="coluna_2">'
+            +
+            '<div class="subcolunas_1">'
+            +
+            '<div class="filheira">'
+            +
+            '<img class="img" src="./Acessts/Imagens/Iconis/home.png" alt="">'
+            +
+            '</div>'
+            +
+            '<div id="sub_entrada_moni_1"></div>'
+            +
+            '<div class="filheira">'
+            +
+            '<img class="img" src="./Acessts/Imagens/Iconis/technical-support.png" alt="">'
+            +
+            '</div>'
+            +
+            '<div class="filheira">'
+            +
+            '<img class="img" src="./Acessts/Imagens/Iconis/caixa-de-ferramentas.png" alt="">'
+            +
+            '</div>'
+            +
+            '</div>'
+            +
+            '<div class="subcolunas_2">'
+            +
+            '<div class="filheira">'
+            +
+            '<img class="img" src="./Acessts/Imagens/Iconis/central-de-atendimento.png" alt="">'
+            +
+            '</div>'
+            +
+            '<div class="filheira">'
+            +
+            ' <img class="img" src="./Acessts/Imagens/Iconis/engrenagem - Copia.png" alt="">'
+            +
+            '</div>'
+            +
+            '</div>'
+            +
+            '</div>'
+            +
+            '</div>'
+            +
+            '<div class="seguimentacao_2">'
+            +
+            '<div class="coluna_1">'
+            +
+            '<div class="subcolunas_1">'
+            +
+            '<div class="filheira">'
+            +
+            '<img class="profileImage" alt="">'
+            +
+            '</div>'
+            +
+            '<div class="filheira">'
+            +
+            '<h2>' + primeiroNome + '</h2>'
+            +
+            '<h2>' + Empresa + '</h2>'
+            +
+            '</div>'
+            +
+            '</div>'
+            +
+            '<div class="subcolunas_2">'
+            +
+            '<button class="id_ajuste" id="id_ajuste">'
+            +
+            '<img class="imgjust" src="./Acessts/Imagens/Iconis/seta-direita.png" alt="">'
+            +
+            '</button>'
+            +
+            '</div>'
+            +
+            '</div>'
+            +
+            '<div class="coluna_2">'
+            +
+            '<div class="subcolunas_1">'
+            +
+            '<a href="./html/Home.html" class="filheira_a" target="frame">'
+            +
+            '<div class="filheira">'
+            +
+            '<h2>Home</h2>'
+            +
+            '</div>'
+            +
+            '</a>'
+            +
+            //Estrutura vaizia dedicada para aparesentação do painel de monitoramento caso o usuário tenha permissão para o visualizar.
+            '<div id="sub_entrada_moni_2"></div>'
+            +
+            '<a href="https://suporte.itguys.com.br/" class="filheira_a" target="frame">'
+            +
+            '<div class="filheira">'
+            +
+            '<h2>Servicdesk</h2>'
+            +
+            '</div>'
+            +
+            '</a>'
+            +
+            '<a href="./html/projetos_itguys.html" class="filheira_a" target="frame">'
+            +
+            '<div class="filheira">'
+            +
+            '<h2>Ferramentas</h2>'
+            +
+            '</div>'
+            +
+            '</a>'
+            +
+            '</div>'
+            +
+            '<div class="subcolunas_2">'
+            +
+            '<a href="https://api.whatsapp.com/send?phone=5521966344698" class="filheira_a" target="black_">'
+            +
+            '<div class="filheira">'
+            +
+            '<h2>Suporte</h2>'
+            +
+            '</div>'
+            +
+            '</a>'
+            +
+            '<a href="./html/Config.html" class="filheira_a">'
+            +
+            '<div class="filheira">'
+            +
+            '<h2>Configurações</h2>'
+            +
+            '</div>'
+            +
+            '</a>'
+            +
+            '</div>'
+            +
+            '</div>'
+            +
+            '</div>'
+            +
+            '</section>'
+            +
+            '</nav>'
+            +
+            '<main class="apresentacao">'
+            +
+            '<section class="capitulo_1">'
+            +
+            '<div class="Bloco_subcab1_1">'
+            +
+            '<img class="companyLogo" alt="" class="icon_subcab1_1">'
+            +
+            '</div>'
+            +
+            '<div class="Bloco_subcab1_2">'
+            +
+            '<a href="https://dev.itguys.com.br/"><button>Logout</button></a>'
+            +
+            '</div>'
+            +
+            '</section>'
+            +
+            '<section class="capitulo_2">'
+            +
+            '<iframe id="test1" name="frame" class="transmissão" src="./html/Home.html"frameborder = "0" ></iframe > '
+            +
+            '</section>'
+            +
+            '</main>'
+
+        const construido = true;
+
+        ;
+        localStorage.setItem('construido', JSON.stringify(construido));
+
+        var botao = document.getElementById('id_ajuste');
+        var cabecario = document.querySelector('.capitulo_1');
+        var tela = document.querySelector('.capitulo_2');
+        var menu = document.querySelector('.menu_lateral');
+
+        if (botao) {
+            botao.addEventListener('click', function () {
+                console.log('Botão clicado!');
+                if (menu) menu.classList.toggle('expansao');
+                if (cabecario) cabecario.classList.toggle('expansao');
+                if (tela) tela.classList.toggle('expansao');
+            });
+        } else {
+            console.error('Botão não encontrado!');
+        }
+
+
+        if (Permissoes.visuMonitor) {
+            const script2 = document.createElement('script');
+            script2.src = './js/Ambiente/Monitoramento/Estrutura_Secundaria_Monitor.js';
+            script2.setAttribute // Acessando a propriedade corretamente
+            document.body.appendChild(script2);
+        }
+
+        // Adiciona o listener de clique após a construção do HTML
+
+
+
+
+
+
+        //Construtores responsavels sobre a construção de alguns scripts que não são default, que só atendem o ambiente do usuário.
+
+        //construtor da reação do menu sobre as interações do usuário
+
+
+
+
+
+
+
+
+
+    } catch (error) {
+
+
+        //Constante de controle sobre estilos css do painel de erro. 
+        const estilos = document.getElementById('conexao');
+        estilos.href = '../Css/page/Telas_acao/erro_404.css';
+
+        //variaveis de conexão de informações, possuindo informações algumas informaçõe sendo elas:
+        //o Status do erro 
+        //Mensagem do erro
+        //Um mensagem complementar sobre o erro
+
+
+        const apiUrl = await getApiUrl();  // Obtém a URL da API a partir do PHP
+        const token = getAuthToken();      // Obtém o token JWT do localStorage
+
+        // Faz uma requisição para obter os dados da rota /mounting
+        const response = await fetch(`${apiUrl}/mounting`, {
+            method: 'GET',
+            headers: {
+                'Content-Type': 'application/json',
+                'x-access-token': token ? token : ''
+            }
+        });
+
+        const respostaserver = response.status
+
+        if (respostaserver == 401) {
+
+            var Status = 'Erro 401';
+            var mensagem = 'Desculpe mas sua página não foi encontrada';
+            var sub_mensagem = 'Tente fazer seu, login novamente';
+            var button_info = 'Retorne';
+            var button_acao = '/Sites/Site_ItGuys/ambiente_do_usu%C3%A1rio/login.html';
+
+        }
+
+        if (respostaserver == 404) {
+
+            var Status = 'Erro 404';
+            var mensagem = 'Houve um problema com seu ambiente !!';
+            var sub_mensagem = 'Por favor contate o suporte suporte@itguys.com.br';
+            var button_info = 'Nós contate';
+            var button_acao = 'https://api.whatsapp.com/send?phone=5521966344698';
+
+        }
+
+
+        //Constante usada para a criação da estrutura, sendo usada para apresentar todo o painel
+        const erro = document.getElementById('entrada_1');
+
+        erro.innerHTML = '<section class="matriz_404" id="cap">'
+            +
+            '<section class="paineis_1"><div class="cap"><h1>' + Status + '</h1></div></section>'
+            +
+            '<section class="paineis_2">'
+            +
+            '<div class="cap"><h2>' + mensagem + '</h2><p>' + sub_mensagem + '</p></div>'
+            +
+            '<div class="cap_2"><a href="' + button_acao + '"><button>' + button_info + '</button></a></div>'
+            +
+            '</section>'
+            +
+            '<div class="wave wave_1"></div>'
+            +
+            '<div class="wave wave_2"></div>'
+            +
+            '<div class="wave wave_3"></div>'
+            +
+            '<div class="wave wave_4"></div>'
+            +
+            '</section>'
+            ;
+
+
+
+
+        console.error('Erro ao criar blocos:', error);
+
+
+
+    }
 }



+// Função para carregar uma imagem protegida com token JWT e exibi-la
+
+async function loadImage(url, imgElementClass) {
+    try {
+        const token = getAuthToken();
+        console.log('Token:', token);
+        console.log('URL da imagem:', url);
+
+        const response = await fetch(url, {
+            method: 'GET',
+            headers: {
+                'x-access-token': token ? token : ''
+            }
+        });
+
+        if (!response.ok) {
+            throw new Error('Erro ao carregar a imagem: ' + response.statusText);
+        }
+
+        const blob = await response.blob();
+        const imageUrl = URL.createObjectURL(blob);
+
+        // Seleciona todos os elementos com a classe
+        const imgElements = document.getElementsByClassName(imgElementClass);
+        if (imgElements.length > 0) {
+            for (let i = 0; i < imgElements.length; i++) {
+                imgElements[i].src = imageUrl;
+            }
+        } else {
+            console.warn('Nenhum elemento encontrado com a classe:', imgElementClass);
+        }
+
+        return imageUrl; // Retorna a URL da imagem carregada
+    } catch (error) {
+        console.error('Erro ao carregar a imagem:', error);
+        console.log('Classe do elemento:', imgElementClass);
+        return null; // Retorna null em caso de erro
+    }
+}
+// Função para carregar a imagem de fundo
+async function loadBackgroundAndUpdateStyle() {
+    try {
+        const apiUrl = await getApiUrl();
+        const token = getAuthToken();
+        const response = await fetch(`${apiUrl}/mounting`, {
+            method: 'GET',
+            headers: {
+                'x-access-token': token ? token : ''
+            }
+        });
+
+        if (!response.ok) {
+            throw new Error('Erro ao carregar os dados: ' + response.statusText);
+        }
+
+        const data = await response.json();
+        const imagemFun = `${apiUrl}${data.usuario.img_fundo}`;
+
+        const fundoResponse = await fetch(imagemFun, {
+            method: 'GET',
+            headers: {
+                'x-access-token': token ? token : ''
+            }
+        });
+
+        if (!fundoResponse.ok) {
+            throw new Error('Erro ao carregar a imagem de fundo: ' + fundoResponse.statusText);
+        }
+
+        const blob = await fundoResponse.blob();
+        const fundoUserUrl = URL.createObjectURL(blob);
+
+        const fundouser = document.getElementById('fundouser');
+        fundouser.innerHTML =
+            '.seguimentacao_2 .coluna_1 {' +
+            'width: 100%;' +
+            'height: 30vh;' +
+            'display: flex;' +
+            'flex-direction: row;' +
+            'background-image: url("' + fundoUserUrl + '");' +
+            'background-position: center;'
+        'background-position: center;' +
+            'background-size: cover;' +
+            'overflow: hidden;' +
+            'transition: 1s ease;' +
+            '}';




+        console.log('Imagem de fundo carregada e estilo aplicado com sucesso.');
+    } catch (error) {
+        console.error('Erro ao carregar a imagem de fundo:', error);
+    }
+}
+
+// Inicia o carregamento das imagens quando o script for carregado
+document.addEventListener('DOMContentLoaded', async () => {
+
+    await criarBlocos();
+    await loadBackgroundAndUpdateStyle();
+
+});


--- a/js/Ambiente/Estrutura/Estrutura_Primaria_modelo.js
+++ b/js/Ambiente/Estrutura/Estrutura_Primaria_modelo.js
@ -0,0 +1,216 @@
+
+
+//Varivel para valida a autenticação do usuário, se for true o ambiente é construido, se for false, um tela de erro é apresentada no lugar do ambiente, e caso a resposta demore para ser apresentada um tela de carregamento é apresentada.
+var autenteticação = true;
+
+//If que constrola o cenario de true
+if (autenteticação == true) {
+
+    //constante que controla o estilo css que está estilizando todo o ambiente do usuário.
+    const estilos = document.getElementById('conexao');
+    estilos.href = '../Css/global/Estrutura.css';
+
+    //variaveis de conexão de informações, possuindo informações algumas informaçõe sendo elas:
+    //Nome do usuário
+    //Nome da empresa
+    //Imagem do usuário
+    //Imagem de fundo do usuário
+    var Usuário = 'Daivid';
+    var Empresa = 'ItGuys';
+    var ImagemUser = '../Acessts/Imagens/1605305486169.jpg';
+    var imagemFun = 'url(../Acessts/Imagens/01160209321024.jpg)';
+
+    //Essa ultima variavel é dedicada ao controle de hiriaquia, caso alguem tenha permissão para visualizar essa categoria, será true, caso ela não tenha permissão, será false, e então toda essa categoria não será apresentada.
+    var visuMonitor = true;
+
+
+    //constante conectada com estilos internos dentro do próprio html, para trazer a capacidade de controlar a imagem que está no fundo do perfil do suário.
+    const fundouser = document.getElementById('fundouser');
+
+    fundouser.innerHTML =
+        '.Corpo_1 .Colunas_1 {'
+        +
+        'display: flex;'
+        +
+        'flex-direction: row;'
+        +
+        'background-image:' + imagemFun + ';'
+        +
+        'background-position: center;'
+        +
+        'background-size: cover;'
+        +
+        'width: 15vw;'
+        +
+        'height: 10vh;'
+        +
+        'overflow: hidden;'
+        +
+        'transition: 1s ease;'
+        ;
+
+    //Constante de construção primira do ambiente do usuário, é aqui onde toda á página é construida, ao mesmo tempo que as variaveis mudificam certas informações.
+    const construtor_primario = document.getElementById('entrada_1');
+
+    construtor_primario.innerHTML =
+        '<section class="menu">'
+        +
+        '<header class="cabecario_1">'
+        +
+        '<div class="Bloco_subcab1_1"><img src="../Acessts/Imagens/iT_Guys/logo_flat.png" alt="" class="icon_subcab1_1"></div>'
+        +
+        '<div class="Bloco_subcab1_2"><a href="https://dev.itguys.com.br/"><button>Logout</button></a></div>'
+        +
+        '</header>'
+        +
+        '</section>'
+        +
+        '<main class="matriz">'
+        +
+        '<section class="capitulo_1">'
+        +
+        '<div class="Corpo_1">'
+        +
+        '<div class="Colunas_1">'
+        +
+        '<div class="seguimentos_1"><button><img id="menu" src="../Acessts/Imagens/Iconis/seta-direita.png" alt=""></button></div>'
+        +
+        '<div class="seguimentos_2">'
+        +
+        '<div class="user_1">'
+        +
+        '<img src="' + ImagemUser + '" alt="" class="icon_subcab2_2">'
+        +
+        '<img src="' + ImagemUser + '" alt="" class="icon_subcab2_1">'
+        +
+        '</div>'
+        +
+        '<div class="user_2"><p> <div id="User">' + Usuário + '</div><div id="Empresa">' + Empresa + '</div></p></div>'
+        +
+        '</div>'
+        +
+        '</div>'
+        +
+        '<div class="Colunas_2">'
+        +
+        '<div class="seguimentos_1"></div>'
+        +
+        '<div class="seguimentos_2"><div class="sessao_1"><a href="./Home.html" target="frame">'
+        +
+        '<div class="item_menu"><img src="../Acessts/Imagens/Iconis/home.png" alt=""><p>Home</p></div></a>'
+        +
+        '<section class="forg">'
+        +
+        //Estrutura vaizia dedicada para aparesentação do painel de monitoramento caso o usuário tenha permissão para o visualizar.
+        '<div id="sub_entrada"></div>'
+        +
+        '</section>'
+        +
+        '<a href="http://10.10.253.111/"><div class="item_menu"><img src="../Acessts/Imagens/Iconis/technical-support.png" alt=""><p>Servicedesk</p></div></a>'
+        +
+        '</div>'
+        +
+        '<div class="sessao_2">'
+        +
+        '<a href="https://api.whatsapp.com/send?phone=5521966344698"><div class="item_menu"><img src="../Acessts/Imagens/Iconis/central-de-atendimento.png" alt=""><p>Suporte</p></div></a>'
+        +
+        '<a href="./Config.html" ><div class="item_menu"><img src="../Acessts/Imagens/Iconis/engrenagem - Copia.png" alt=""><p>Configuracões</p></div></a>'
+        +
+        ' </div>'
+        +
+        '</section>'
+        +
+        '<section class="capitulo_2">'
+        +
+        '<div class="Corpo_2">'
+        +
+        '<div class="Colunas_1"><iframe id = "test1" name = "frame" class="transmissão" src = "./Home.html"frameborder = "0" ></iframe ></div>'
+        +
+        '</div>'
+        +
+        '</main>'
+        ;
+
+    //Construtores responsavels sobre a construção de alguns scripts que não são default, que só atendem o ambiente do usuário.
+
+    //construtor da reação do menu sobre as interações do usuário
+    const script1 = document.createElement('script');
+    script1.src = '../js/Ambiente/Estrutura/Reacao_menu.js';
+    document.body.appendChild(script1);
+
+    //construtor da sub camada de construção, alinhada sobre a condicional onde se a pessoa possui permisão para visualizar o monitoramente de sua empresa, visuMonitor será igual á true, enquanto se ela não tiver permissão para visualizar o visuMonitor será igual á false
+    if (visuMonitor == true) {
+        const script2 = document.createElement('script');
+        script2.src = './js/Ambiente/Monitoramento/Estrutura_Secundaria_Monitor.js';
+        document.body.appendChild(script2);
+    };
+
+
+}
+
+//Else sendo a reação opostao ao do if, logo sendo esse o cenario onde a autenticação não seja valida.
+else {
+
+    //Constante de controle sobre estilos css do painel de erro. 
+    const estilos = document.getElementById('conexao');
+    estilos.href = '../Css/page/Telas_acao/erro_404.css';
+
+    //variaveis de conexão de informações, possuindo informações algumas informaçõe sendo elas:
+    //o Status do erro 
+    //Mensagem do erro
+    //Um mensagem complementar sobre o erro
+    var Status = 'Erro 404';
+    var mensagem = 'Desculpe mas sua página não foi encontrada';
+    var sub_mensagem = 'Tente fazer seu, login novamente';
+
+    //Constante usada para a criação da estrutura, sendo usada para apresentar todo o painel
+    const erro = document.getElementById('entrada_1');
+
+    erro.innerHTML = '<section class="matriz_404" id="cap">'
+        +
+        '<section class="paineis_1"><div class="cap"><h1>' + Status + '</h1></div></section>'
+        +
+        '<section class="paineis_2">'
+        +
+        '<div class="cap"><h2>' + mensagem + '</h2><p>' + sub_mensagem + '</p></div>'
+        +
+        '<div class="cap_2"><a href="https://dev.itguys.com.br/ambiente_do_usu%C3%A1rio/login.html"><button>Retornar</button></a></div>'
+        +
+        '</section>'
+        +
+        '<div class="wave wave_1"></div>'
+        +
+        '<div class="wave wave_2"></div>'
+        +
+        '<div class="wave wave_3"></div>'
+        +
+        '<div class="wave wave_4"></div>'
+        +
+        '</section>'
+        ;
+
+
+
+
+}
+
+
+// Event listener para o botão de logout
+const logoutButton = document.getElementById('logoutButton');
+if (logoutButton) {
+    logoutButton.addEventListener('click', function () {
+        // Limpar o token do localStorage ao clicar no botão de logout
+        clearAuthToken();
+        // Redirecionar para a página de login ou qualquer outra página desejada após o logout
+        window.location.href = '../login.html';
+    });
+}
+
+
+
+
+
+
+
+
+
--- a/js/Ambiente/Estrutura/Reacao_menu.js
+++ b/js/Ambiente/Estrutura/Reacao_menu.js
@ -1,33 +1,17 @@

-//Função de adapitação do menu e da tela do ambiente do usuário, resumidamente ao apertar na seinha do menu, todo o ambiente do usuário é reajustado, enquanto da mesma forma ao pertar a setinha novamente todo o ambiente do usuário retornar ao seu laouyt tradicional
-

-//Aqui são as variaveis que conectao todos esses elementos, dentre elas:
-//botão conecta o pontao de condicional da ação
-//cabecario elemento pertencente da tela do usuário
-//tela seria o iframe que apresenta todas as informações do ambiente do usuário
-//menu seria os elementos visuais do usuário
-//temas seria alguns elementos do proprio menu
-var botao = document.querySelector('#menu')
-var cabecario = document.querySelector('.cabecario_1')
-var tela = document.querySelector('.transmissão')
-var menu = document.querySelector('.capitulo_1')
-var temas = document.querySelectorAll('.item_menu')
+var botao = document.getElementById('id_ajuste');
+var cabecario = document.querySelector('.capitulo_1');
+var tela = document.querySelector('.capitulo_2');
+var menu = document.querySelector('.menu_lateral');

-
-//Aqui se aplica o evento de cliente, sobre afunção que aplica as classes no menu caberio e telas
-botao.addEventListener('click', function () {
-    menu.classList.toggle('expansao');
-    cabecario.classList.toggle('expansao');
-    tela.classList.toggle('expansao');
-
-});
-
-function selectLink() {
-    temas.forEach((item) =>
-        item.classList.remove('ativo')
-    )
-    this.classList.add('ativo')
+if (botao) {
+    botao.addEventListener('click', function () {
+        console.log('Botão clicado!');
+        if (menu) menu.classList.toggle('expansao');
+        if (cabecario) cabecario.classList.toggle('expansao');
+        if (tela) tela.classList.toggle('expansao');
+    });
+} else {
+    console.error('Botão não encontrado!');
 }
-temas.forEach((item) =>
-    item.addEventListener('click', selectLink))
--- a/js/Ambiente/Estrutura/load.js
+++ b/js/Ambiente/Estrutura/load.js
@ -1,82 +1,86 @@
-// Adiciona um ouvinte de evento para quando o conteúdo do DOM estiver completamente carregado
-document.addEventListener("DOMContentLoaded", function () {
-    // Obtém o elemento com o ID 'entrada_1'
+function verificarAmbiente() {
    var main = document.getElementById("entrada_1");
+    const tela_laod = document.getElementById('entrada_2');
+    let elemento_1;
+    let elemento_2;

-    // Verifica se a tag main está vazia
    if (main.innerHTML.trim() === "") {
-        // Se a tag estiver vazia, obtém novamente o mesmo elemento
-        const tela_laod = document.getElementById('entrada_1');
+        elemento_1 = 'Estamos carregando sua página';
+    } else {
+        elemento_1 = 'Algo foi encontrado mas estamos preparando';
+    }

-        // Adiciona um elemento canvas ao conteúdo da tag main
-        tela_laod.innerHTML = '<canvas id="animationCanvas"></canvas>';
+    elemento_2 = '<canvas id="animationCanvas"></canvas>';
+    tela_laod.innerHTML = '<div class="teste"><h1>' + elemento_1 + '</h1> ' + elemento_2 + ' </div>';
+}

-        // Obtém o contexto 2D do canvas para desenhar
-        const canvas = document.getElementById('animationCanvas');
-        const ctx = canvas.getContext('2d');
+function finalizar() {
+    const tela_laod = document.getElementById('entrada_2');
+    setTimeout(() => {
+        tela_laod.innerHTML = '';
+    }, 3000);
+}

-        // Define as dimensões do canvas para preencher a tela
+window.addEventListener('DOMContentLoaded', iniciarAnimacao)
+
+window.addEventListener('load', () => {
+    finalizar();
+});
+
+
+
+function iniciarAnimacao() {
+    const canvas = document.getElementById('animationCanvas');
+    const ctx = canvas.getContext('2d');
+    canvas.width = window.innerWidth;
+    canvas.height = window.innerHeight;
+
+    const circle = {
+        centerX: canvas.width / 2,
+        centerY: canvas.height / 2,
+        radius: 150,
+        rotationSpeed: 0.10,
+        angle: 0,
+        linePath: [],
+        maxPathLength: 350
+    };
+
+    function drawCircularPath() {
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        const pathX = circle.centerX + circle.radius * Math.cos(circle.angle);
+        const pathY = circle.centerY + circle.radius * Math.sin(circle.angle);
+        circle.linePath.push({ x: pathX, y: pathY });
+
+        ctx.beginPath();
+        for (let i = 0; i < circle.linePath.length - 1; i++) {
+            ctx.moveTo(circle.linePath[i].x, circle.linePath[i].y);
+            ctx.lineTo(circle.linePath[i + 1].x, circle.linePath[i + 1].y);
+        }
+        ctx.strokeStyle = '#22c0a3';
+        ctx.lineWidth = 10;
+        ctx.stroke();
+
+        if (circle.linePath.length > circle.maxPathLength) {
+            circle.linePath.shift();
+            if (circle.angle >= Math.PI * 2) {
+                circle.angle = 0;
+                circle.linePath = [];
+            }
+        }
+    }
+
+    function animate() {
+        circle.angle += circle.rotationSpeed;
+        drawCircularPath();
+        requestAnimationFrame(animate);
+    }
+
+    animate();
+
+    window.addEventListener('resize', () => {
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
-
-        // Define um objeto 'circle' que armazena as propriedades da animação
-        const circle = {
-            centerX: canvas.width / 2, // Centro do círculo no eixo X
-            centerY: canvas.height / 2, // Centro do círculo no eixo Y
-            radius: 150, // Raio do círculo
-            rotationSpeed: 0.10, // Velocidade de rotação
-            angle: 0, // Ângulo atual
-            linePath: [], // Armazena a trajetória do ponto
-            maxPathLength: 350 // Comprimento máximo da trajetória
-        };
-
-        // Função para desenhar a trajetória circular
-        function drawCircularPath() {
-            // Limpa o canvas antes de desenhar
-            ctx.clearRect(0, 0, canvas.width, canvas.height);
-
-            // Calcula as coordenadas do ponto atual na trajetória circular
-            const pathX = circle.centerX + circle.radius * Math.cos(circle.angle);
-            const pathY = circle.centerY + circle.radius * Math.sin(circle.angle);
-            // Adiciona o ponto atual à trajetória
-            circle.linePath.push({ x: pathX, y: pathY });
-
-            // Desenha a trajetória acumulada
-            ctx.beginPath();
-            for (let i = 0; i < circle.linePath.length - 1; i++) {
-                ctx.moveTo(circle.linePath[i].x, circle.linePath[i].y);
-                ctx.lineTo(circle.linePath[i + 1].x, circle.linePath[i + 1].y);
-            }
-            ctx.strokeStyle = '#22c0a3'; // Define a cor da linha
-            ctx.lineWidth = 10; // Define a largura da linha
-            ctx.stroke(); // Desenha a linha no canvas
-
-            // Limita o comprimento da trajetória
-            if (circle.linePath.length > circle.maxPathLength) {
-                circle.linePath.shift(); // Remove o primeiro ponto do caminho
-                // Reinicia a trajetória se um ciclo completo foi completado
-                if (circle.angle >= Math.PI * 2) { // Verifica se completou um ciclo
-                    circle.angle = 0; // Reinicia o ângulo
-                    circle.linePath = []; // Limpa a trajetória
-                }
-            }
-        }
-
-        // Função de animação que atualiza a posição do ponto e desenha a trajetória
-        function animate() {
-            circle.angle += circle.rotationSpeed; // Atualiza o ângulo
-            drawCircularPath(); // Desenha a trajetória atual
-            requestAnimationFrame(animate); // Solicita a próxima animação
-        }
-
-        animate(); // Inicia a animação
-
-        // Ajusta o tamanho do canvas quando a janela é redimensionada
-        window.addEventListener('resize', () => {
-            canvas.width = window.innerWidth; // Ajusta a largura
-            canvas.height = window.innerHeight; // Ajusta a altura
-            circle.centerX = canvas.width / 2; // Atualiza o centro X
-            circle.centerY = canvas.height / 2; // Atualiza o centro Y
-        });
-    }
-});
+        circle.centerX = canvas.width / 2;
+        circle.centerY = canvas.height / 2;
+    });
+}
--- a/js/Ambiente/Monitoramento/Estrutura_Secundaria_Monitor.js
+++ b/js/Ambiente/Monitoramento/Estrutura_Secundaria_Monitor.js
@ -1,39 +1,23 @@
 // Verifica se a variável 'visuMonitor' é verdadeira

+
 if (Permissoes.visuMonitor) {
    // Obtém o elemento com o ID 'sub_entrada' para inserir o conteúdo
-    const construtor_Secundarios_Monitoramento = document.getElementById('sub_entrada');
+    const construtor_Secundarios_Monitoramento_icon = document.getElementById('sub_entrada_moni_1');
+    const construtor_Secundarios_Monitoramento_button = document.getElementById('sub_entrada_moni_2');

    // Define o conteúdo HTML a ser inserido no 'sub_entrada'
-    construtor_Secundarios_Monitoramento.innerHTML =
-        '<div class="item_menu" id="testes"><img src="../Acessts/Imagens/Iconis/monitor.png" alt=""><p>Monitoramento</p></div>'
-        + // Cria o item do menu "Monitoramento"
-        '<div class="sub_menu" id="sub_menu">' // Cria um submenu
-        +
-        // Cada link dentro do submenu, com imagem e texto
-        '<a href="./Monitoramento.html" target="frame"><div class="sub_item_1"><img src="../Acessts/Imagens/Iconis/hospital.png" alt=""><p>iTGuys</p></div></a>'
-        +
-        '<a href="./Tela_Monitoramento/Padrão/Monitoramento_GAU_Freguesia.html" target="frame"><div class="sub_item_1"><img src="../Acessts/Imagens/Iconis/hospital.png" alt=""><p>Gau Freguesia</p></div></a>'
-        +
-        '<a href="./Tela_Monitoramento/Padrão/Monitoramento_GAU_Infantil.html" target="frame"><div class="sub_item_1"><img src="../Acessts/Imagens/Iconis/hospital.png" alt=""><p>Gau Infantil</p></div></a>'
-        +
-        '<a href="./Tela_Monitoramento/Padrão/Monitoramento_Sao_Fabiano.html" target="frame"><div class="sub_item_1"><img src="../Acessts/Imagens/Iconis/hospital.png" alt=""><p>São Fabiano</p></div></a>'
-        +
-        '<a href="./Tela_Monitoramento/Padrão/Monitoramento_Enseg_Itaguaí.html" target="frame"><div class="sub_item_1"><img src="../Acessts/Imagens/Iconis/hospital.png" alt=""><p>Unidade Itaguaí</p></div></a>'
-        +
-        '<a href="./Tela_Monitoramento/Padrão/Monitoramento_Enseg_Recreio.html" target="frame"><div class="sub_item_1"><img src="../Acessts/Imagens/Iconis/hospital.png" alt=""><p>Unidade Recreio</p></div></a>'
-        +
-        '<a href="./Tela_Monitoramento/Padrão/Monitoramento_Enseg_Cliente_VPN.html" target="frame"><div class="sub_item_1"><img src="../Acessts/Imagens/Iconis/vpn.png" alt=""><p>Client Vpn</p></div></a>'
-        +
-        '<a href="./Tela_Monitoramento/Padrão/Monitoramento_Ferreira_Real.html" target="frame"><div class="sub_item_1"><img src="../Acessts/Imagens/Iconis/hospital.png" alt=""><p>Ferreira Real</p></div></a>'
-        +
-        '<a href="./Tela_Monitoramento/Padrão/Monitoramento_Oeste_Pan.html" target="frame"><div class="sub_item_1"><img src="../Acessts/Imagens/Iconis/hospital.png" alt=""><p>Oeste Pan</p></div></a>'
-        +
-        '<a href="./Tela_Monitoramento/Padrão/Monitoramento_IBAP.html" target="frame"><div class="sub_item_1"><img src="../Acessts/Imagens/Iconis/hospital.png" alt=""><p>IBAP</p></div></a>'
-        +
-        '<a href="./Tela_Monitoramento/Padrão/Monitoramento_IVVCG.html" target="frame"><div class="sub_item_1"><img src="../Acessts/Imagens/Iconis/hospital.png" alt=""><p>IVVCG</p></div></a>'
-        +
-        '</div>'; // Fecha o submenu
+    construtor_Secundarios_Monitoramento_button.innerHTML =
+        `<a href="" class="filheira_a" target="frame">
+            <div class="filheira">
+                <h2>Monitoramento</h2>
+            </div>
+        </a>`;
+
+    construtor_Secundarios_Monitoramento_icon.innerHTML =
+        `<div class="filheira">
+            <img class="img" src="./Acessts/Imagens/Iconis/monitor.png" alt="">
+        </div>`;

 };

--- a/js/Ambiente/Service/Contrutor_Serviços.js
+++ b/js/Ambiente/Service/Contrutor_Serviços.js
@ -0,0 +1,108 @@
+const painel_serviços_icon = document.getElementById('saida');
+
+function renderService(service) {
+    const { nome, Imagem, id_server, resposta_popup, resposta_script, resposta_estilo } = service;
+    const serviceDiv = document.createElement('div');
+    serviceDiv.classList.add('painel');
+    serviceDiv.id = id_server;
+
+    serviceDiv.innerHTML = `
+<div class="Colun_1">
+<img src="${Imagem}" alt="">
+</div>
+<div class="Colun_2">
+<h2>${nome}</h2>
+</div>
+`;
+
+    painel_serviços_icon.appendChild(serviceDiv);
+
+    serviceDiv.addEventListener('click', () => {
+        popup(resposta_popup, resposta_script, resposta_estilo);
+    });
+}
+
+function renderAllServices() {
+    painel_serviços_icon.innerHTML = '';
+
+    // Renderiza os serviços de Ser_Itguys
+    for (const service of Object.values(Data_Center.Ser_Itguys)) {
+        renderService(service);
+    }
+
+    // Renderiza os serviços de Ser_User
+    for (const service of Object.values(Data_Center.Ser_User)) {
+        renderService(service);
+    }
+}
+
+// Inicializa a renderização
+renderAllServices();
+
+function popup(resposta, script, estilo) {
+    const painel_serviços = document.getElementById('painel_Servico');
+    painel_serviços.innerHTML = `
+<section>
+<div class='colun_1'>
+    <button id='fechar'>
+        X
+    </button>
+</div>
+<div class='colun_2'>
+    ${resposta}
+</div>
+</section>
+`;
+
+    // Remover estilos e scripts anteriores
+    const existingStyles = document.querySelectorAll('style');
+    existingStyles.forEach(style => style.remove());
+    const existingScripts = document.querySelectorAll('script[data-dynamic]');
+    existingScripts.forEach(script => script.remove());
+
+    // Injetar estilo se houver
+    if (estilo) {
+        const style = document.createElement('style');
+        style.innerHTML = estilo;
+        document.head.appendChild(style);
+    }
+
+    // Injetar script se houver
+    if (script) {
+        const scriptElement = document.createElement('script');
+        scriptElement.setAttribute('data-dynamic', '');
+        scriptElement.src = script;
+        document.body.appendChild(scriptElement);
+    }
+
+    const button_servi = document.getElementById('fechar');
+    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');
+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);
+        }
+    }
+}
--- a/js/Ambiente/Service/Datas_service.js
+++ b/js/Ambiente/Service/Datas_service.js
@ -0,0 +1,66 @@
+const Data_Center = {
+    Ser_User: {},
+    Ser_Itguys: {}
+};
+
+const permissa_User = true;
+
+if (permissa_User === true) {
+    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';`
+        }
+    };
+}
+
+const permissa_Itguys = true;
+
+if (permissa_Itguys === true) {
+    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'>
+                <label for="mac_equipamento">MAC Equipamento:</label>
+                <input type="text" id="mac_equipamento" name="mac_equipamento" required><br>
+                </div>
+
+                <div class='formulario'>
+                <label for="nome_cliente">Nome do Cliente:</label>
+                <input type="text" id="nome_cliente" name="nome_cliente" required><br>
+                </div>
+
+                <div class='formulario'>
+                <div class='formulario'></div>
+                <label for="nome_setor">Nome do Setor:</label>
+                <input type="text" id="nome_setor" name="nome_setor" required><br>
+                </div>
+
+                <div class='formulario'>
+                <label for="usuario_sip">Usuário SIP:</label>
+                <input type="text" id="usuario_sip" name="usuario_sip" required><br>
+                </div>
+
+                <div class='formulario'>
+                <label for="senha_sip">Senha SIP:</label>
+                <input type="password" id="senha_sip" name="senha_sip" required><br>
+                </div>
+
+                <div class='formulario'>
+                <button type="button" onclick="gerarArquivo()">Gerar Arquivo</button>
+                </div>
+            </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 1s ease;}@keyframes surgirpopup {to {opacity: 1;transform: translateY(0);}from {opacity: 0;transform: translateY(40vw);}}.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 label {font-family: var(--font_titulo);font-size: 1vw;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);};`
+        }
+    };
+}
--- a/js/Ambiente/Service/List/Gerador_XML_Telefonia.js
+++ b/js/Ambiente/Service/List/Gerador_XML_Telefonia.js
@ -0,0 +1,207 @@
+
+function gerarArquivo() {
+    const macEquipamento = document.getElementById('mac_equipamento').value;
+    const nomeCliente = document.getElementById('nome_cliente').value;
+    const nomeSetor = document.getElementById('nome_setor').value;
+    const usuarioSip = document.getElementById('usuario_sip').value;
+    const senhaSip = document.getElementById('senha_sip').value;
+
+    let conteudo = `<?xml version="1.0" encoding="UTF-8"?>
+    <device>
+        <deviceProtocol>SIP</deviceProtocol>
+        <sshUserId>admin</sshUserId>
+        <sshPassword>p06++kc37$6</sshPassword>
+        <devicePool>
+            <dateTimeSetting>
+                <dateTemplate>D/M/YY</dateTemplate>
+                <timeZone>E. South America Standard/Daylight Time</timeZone>
+                <ntps>
+                    <ntp>
+                        <name>200.160.0.8</name>
+                        <ntpMode>Unicast</ntpMode>
+                    </ntp>
+                </ntps>
+            </dateTimeSetting>
+            <callManagerGroup>
+                <members>
+                    <member priority="0">
+                        <callManager>
+                            <ports>
+                                <sipPort>5060</sipPort>
+                            </ports>
+                            <processNodeName>172.16.254.130</processNodeName>
+                        </callManager>
+                    </member>
+                </members>
+            </callManagerGroup>
+        </devicePool>
+        <sipProfile>
+            <sipProxies>
+                <backupProxy></backupProxy>
+                <backupProxyPort></backupProxyPort>
+                <outboundProxy></outboundProxy>
+                <outboundProxyPort></outboundProxyPort>
+                <registerWithProxy>true</registerWithProxy>
+            </sipProxies>
+            <sipCallFeatures>
+                <cnfJoinEnabled>true</cnfJoinEnabled>
+                <callForwardURI>x-cisco-serviceuri-cfwdall</callForwardURI>
+                <callPickupURI>x-cisco-serviceuri-pickup</callPickupURI>
+                <callPickupListURI>x-cisco-serviceuri-opickup</callPickupListURI>
+                <callPickupGroupURI>x-cisco-serviceuri-gpickup</callPickupGroupURI>
+                <meetMeServiceURI>x-cisco-serviceuri-meetme</meetMeServiceURI>
+                <abbreviatedDialURI>x-cisco-serviceuri-abbrdial</abbreviatedDialURI>
+                <rfc2543Hold>false</rfc2543Hold>
+                <callHoldRingback>2</callHoldRingback>
+                <localCfwdEnable>true</localCfwdEnable>
+                <semiAttendedTransfer>true</semiAttendedTransfer>
+                <anonymousCallBlock>2</anonymousCallBlock>
+                <callerIdBlocking>2</callerIdBlocking>
+                <dndControl>0</dndControl>
+                <remoteCcEnable>true</remoteCcEnable>
+            </sipCallFeatures>
+            <sipStack>
+                <sipInviteRetx>6</sipInviteRetx>
+                <sipRetx>10</sipRetx>
+                <timerInviteExpires>180</timerInviteExpires>
+                <timerRegisterExpires>3600</timerRegisterExpires>
+                <timerRegisterDelta>5</timerRegisterDelta>
+                <timerKeepAliveExpires>120</timerKeepAliveExpires>
+                <timerSubscribeExpires>120</timerSubscribeExpires>
+                <timerSubscribeDelta>5</timerSubscribeDelta>
+                <timerT1>500</timerT1>
+                <timerT2>4000</timerT2>
+                <maxRedirects>70</maxRedirects>
+                <remotePartyID>false</remotePartyID>
+                <userInfo>None</userInfo>
+            </sipStack>
+            <autoAnswerTimer>1</autoAnswerTimer>
+            <autoAnswerAltBehavior>false</autoAnswerAltBehavior>
+            <autoAnswerOverride>true</autoAnswerOverride>
+            <transferOnhookEnabled>false</transferOnhookEnabled>
+            <enableVad>false</enableVad>
+            <dtmfDbLevel>3</dtmfDbLevel>
+            <dtmfOutofBand>avt</dtmfOutofBand>
+            <alwaysUsePrimeLine>false</alwaysUsePrimeLine>
+            <alwaysUsePrimeLineVoiceMail>false</alwaysUsePrimeLineVoiceMail>
+            <kpml>3</kpml>
+            <natEnabled></natEnabled>
+            <natAddress></natAddress>
+            <phoneLabel>${nomeSetor}</phoneLabel>
+            <stutterMsgWaiting>1</stutterMsgWaiting>
+            <callStats>false</callStats>
+            <silentPeriodBetweenCallWaitingBursts>10</silentPeriodBetweenCallWaitingBursts>
+            <disableLocalSpeedDialConfig>false</disableLocalSpeedDialConfig>
+            <startMediaPort>16384</startMediaPort>
+            <stopMediaPort>32766</stopMediaPort>
+            <sipLines>
+                <line button="1">
+                    <featureID>9</featureID>
+                    <featureLabel>${nomeCliente}</featureLabel>
+                    <proxy>USECALLMANAGER</proxy>
+                    <port>5060</port>
+                    <name>${usuarioSip}</name>
+                    <firstname></firstname>
+                    <lastname></lastname>
+                    <displayName></displayName>
+                    <autoAnswer>
+                        <autoAnswerEnabled>2</autoAnswerEnabled>
+                    </autoAnswer>
+                    <callWaiting>3</callWaiting>
+                    <authName>${usuarioSip}</authName>
+                    <authPassword>${senhaSip}</authPassword>
+                    <sharedLine>false</sharedLine>
+                    <messageWaitingLampPolicy>1</messageWaitingLampPolicy>
+                    <messagesNumber>voicemail extension</messagesNumber>
+                    <ringSettingIdle>4</ringSettingIdle>
+                    <ringSettingActive>5</ringSettingActive>
+                    <contact>i${nomeCliente}</contact>
+                    <forwardCallInfoDisplay>
+                        <callerName>true</callerName>
+                        <callerNumber>false</callerNumber>
+                        <redirectedNumber>false</redirectedNumber>
+                        <dialedNumber>true</dialedNumber>
+                    </forwardCallInfoDisplay>
+                </line>
+            </sipLines>
+            <voipControlPort>5060</voipControlPort>
+            <dscpForAudio>184</dscpForAudio>
+            <ringSettingBusyStationPolicy>0</ringSettingBusyStationPolicy>
+            <dialTemplate>dialplan.xml</dialTemplate>
+        </sipProfile>
+        <commonProfile>
+            <phonePassword></phonePassword>
+            <backgroundImageAccess>true</backgroundImageAccess>
+            <callLogBlfEnabled>2</callLogBlfEnabled>
+        </commonProfile>
+        <loadInformation>sip78xx.14-2-1-0001-14</loadInformation>
+        <vendorConfig>
+            <disableSpeaker>false</disableSpeaker>
+            <disableSpeakerAndHeadset>false</disableSpeakerAndHeadset>
+            <pcPort>0</pcPort>
+            <settingsAccess>1</settingsAccess>
+            <garp>0</garp>
+            <voiceVlanAccess>0</voiceVlanAccess>
+            <videoCapability>0</videoCapability>
+            <autoSelectLineEnable>0</autoSelectLineEnable>
+            <sshAccess>0</sshAccess>
+            <sshPort>22</sshPort>
+            <webAccess>0</webAccess>
+            <webProtocol>0</webProtocol>
+            <webAdmin>1</webAdmin>
+            <adminPassword>cisco</adminPassword>
+            <daysDisplayNotActive>7</daysDisplayNotActive>
+            <displayOnTime>00:00</displayOnTime>
+            <displayOnDuration>00:00</displayOnDuration>
+            <displayIdleTimeout>00:00</displayIdleTimeout>
+            <daysBacklightNotActive>7</daysBacklightNotActive>
+            <backlightOnTime>00:00</backlightOnTime>
+            <backlightOnWhenIncomingCall>1</backlightOnWhenIncomingCall>
+            <spanToPCPort>1</spanToPCPort>
+            <loggingDisplay>1</loggingDisplay>
+            <loadServer></loadServer>
+        </vendorConfig>
+        <versionStamp>1143565489-a3cbf294-7526-4c29-8791-c4fce4ce4c42</versionStamp>
+        <capfAuthMode>0</capfAuthMode>
+        <capfList>
+            <capf>
+                <phonePort>3804</phonePort>
+            </capf>
+        </capfList>
+        <certHash></certHash>
+        <encrConfig>false</encrConfig>
+    </device>`;
+
+    async function criarArquivosZip(conteudo, macEquipamento) {
+        const zip = new JSZip();
+
+        // Adicionando o arquivo com conteúdo
+        zip.file(`SEP${macEquipamento.toUpperCase()}.cnf.xml`, conteudo);
+
+        // Adicionando arquivos vazios
+        zip.file(`CTLSEP${macEquipamento.toUpperCase()}.tlv`, '');
+        zip.file(`ITLSEP${macEquipamento.toUpperCase()}.tlv`, '');
+
+        // Gerando o arquivo ZIP
+        const zipContent = await zip.generateAsync({ type: 'blob' });
+
+        // Criando o link para download
+        const url = URL.createObjectURL(zipContent);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = `Arquivos_${macEquipamento.toUpperCase()}.zip`; // Nome do arquivo ZIP
+        document.body.appendChild(a);
+        a.click();
+        document.body.removeChild(a);
+        URL.revokeObjectURL(url);
+    }
+
+    // Chame a função passando o conteúdo e o MAC do equipamento
+    criarArquivosZip(conteudo, macEquipamento);
+
+}
+
+
+const scriptElement = document.createElement('script');
+scriptElement.src = 'https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js';
+document.body.appendChild(scriptElement);
--- a/js/padrao_A1.js
+++ b/js/padrao_A1.js
@ -1,340 +0,0 @@
-
-
-
-// Função para obter a URL base da API
-async function getApiUrl() {
-    try {
-        const response = await fetch('../../../Sites/Site_ItGuys/php/config_url.php'); // Solicita a URL base do PHP
-        if (!response.ok) {
-            throw new Error('Network response was not ok');
-        }
-        const data = await response.json();
-        return data.apiUrl; // Retorna a URL base
-    } catch (error) {
-        console.error('Error fetching API URL:', error);
-        throw error;
-    }
-}
-
-// Função para obter o token do localStorage
-function getAuthToken() {
-    return localStorage.getItem('x-access-token');
-}
-
-
-const Permissoes = {
-    visuMonitor: true,
-};
-
-
-
-// Função para carregar uma imagem protegida com token JWT e exibi-la
-
-// Função para carregar e exibir as imagens protegidas
-async function criarBlocos() {
-    try {
-        const apiUrl = await getApiUrl();  // Obtém a URL da API a partir do PHP
-        const token = getAuthToken();      // Obtém o token JWT do localStorage
-
-        // Faz uma requisição para obter os dados da rota /mounting
-        const response = await fetch(`${apiUrl}/mounting`, {
-            method: 'GET',
-            headers: {
-                'Content-Type': 'application/json',
-                'x-access-token': token ? token : ''
-            }
-        });
-
-        if (!response.ok) {
-            throw new Error('Erro na requisição: ' + response.statusText);
-
-        }
-
-        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;
-        const Empresa = data.empresa.nome;
-        const ImagemUser = `${apiUrl}${data.usuario.img_perfil}`;
-        //const ImagemUser2 = `${apiUrl}${data.usuario.img_perfil}`;
-        const logoEmpresa = `${apiUrl}${data.empresa.logo}`;
-
-
-
-
-        // Exibe as imagens protegidas usando os URLs retornados pela API
-        loadImage(ImagemUser, 'profileImage');
-        //loadImage(ImagemUser2, 'profileImage');  // Imagem de perfil do usuário
-        loadImage(logoEmpresa, 'companyLogo'); // Logo da empresa
-
-        // Acessando o primeiro objeto do array retornado
-
-        console.log(data);
-        console.log(primeiroNome);
-        console.log(Empresa);
-        console.log(ImagemUser);
-        console.log(logoEmpresa);
-
-
-        //var visuMonitor = usuarioInfo.Permissoes_Monitor;
-
-
-        //constante que controla o estilo css que está estilizando todo o ambiente do usuário.
-        const estilos = document.getElementById('conexao');
-        estilos.href = './Css/global/Estrutura.css';
-
-
-        const construtor_primario = document.getElementById('entrada_1');
-
-        construtor_primario.innerHTML =
-            '<section class="menu">'
-            +
-            '<header class="cabecario_1">'
-            +
-            '<div class="Bloco_subcab1_1"><img alt="" class="icon_subcab1_1 companyLogo"></div>'
-            +
-            '<div class="Bloco_subcab1_2"><a href="https://dev.itguys.com.br/"><button>Logout</button></a></div>'
-            +
-            '</header>'
-            +
-            '</section>'
-            +
-            '<main class="matriz">'
-            +
-            '<section class="capitulo_1">'
-            +
-            '<div class="Corpo_1">'
-            +
-            '<div class="Colunas_1">'
-            +
-            '<div class="seguimentos_1"><button><img id="menu" src="../Acessts/Imagens/Iconis/seta-direita.png" alt=""></button></div>'
-            +
-            '<div class="seguimentos_2">'
-            +
-            '<div class="user_1">'
-            +
-            '<img alt="" class="icon_subcab2_2 profileImage">'
-            +
-            '<img alt="" class="icon_subcab2_1 profileImage">'
-            +
-            '</div>'
-            +
-            '<div class="user_2"><p> <div id="User">' + primeiroNome + '</div><div id="Empresa">' + Empresa + '</div></p></div>'
-            +
-            '</div>'
-            +
-            '</div>'
-            +
-            '<div class="Colunas_2">'
-            +
-            '<div class="seguimentos_1"></div>'
-            +
-            '<div class="seguimentos_2"><div class="sessao_1"><a href="./Home.html" target="frame">'
-            +
-            '<div class="item_menu"><img src="../Acessts/Imagens/Iconis/home.png" alt=""><p>Home</p></div></a>'
-            +
-            '<section class="forg">'
-            +
-            //Estrutura vaizia dedicada para aparesentação do painel de monitoramento caso o usuário tenha permissão para o visualizar.
-            '<div id="sub_entrada"></div>'
-            +
-            '</section>'
-            +
-            '<a href="http://10.10.253.111/"><div class="item_menu"><img src="../Acessts/Imagens/Iconis/technical-support.png" alt=""><p>Servicedesk</p></div></a>'
-            +
-            '</div>'
-            +
-            '<div class="sessao_2">'
-            +
-            '<a href="https://api.whatsapp.com/send?phone=5521966344698"><div class="item_menu"><img src="../Acessts/Imagens/Iconis/central-de-atendimento.png" alt=""><p>Suporte</p></div></a>'
-            +
-            '<a href="./Config.html" ><div class="item_menu"><img src="../Acessts/Imagens/Iconis/engrenagem - Copia.png" alt=""><p>Configuracões</p></div></a>'
-            +
-            ' </div>'
-            +
-            '</section>'
-            +
-            '<section class="capitulo_2">'
-            +
-            '<div class="Corpo_2">'
-            +
-            '<div class="Colunas_1"><iframe id = "test1" name = "frame" class="transmissão" src = "./Home.html"frameborder = "0" ></iframe ></div>'
-            +
-            '</div>'
-            +
-            '</main>'
-            ;
-
-
-
-
-        //Construtores responsavels sobre a construção de alguns scripts que não são default, que só atendem o ambiente do usuário.
-
-        //construtor da reação do menu sobre as interações do usuário
-        const script1 = document.createElement('script');
-        script1.src = './js/Ambiente/Estrutura/Reacao_menu.js';
-        document.body.appendChild(script1);
-
-
-        if (Permissoes.visuMonitor) {
-            const script2 = document.createElement('script');
-            script2.src = './js/Ambiente/Monitoramento/Estrutura_Secundaria_Monitor.js';
-            script2.setAttribute // Acessando a propriedade corretamente
-            document.body.appendChild(script2);
-        }
-
-
-
-
-
-    } catch (error) {
-
-
-        //Constante de controle sobre estilos css do painel de erro. 
-        const estilos = document.getElementById('conexao');
-        estilos.href = '../Css/page/Telas_acao/erro_404.css';
-
-        //variaveis de conexão de informações, possuindo informações algumas informaçõe sendo elas:
-        //o Status do erro 
-        //Mensagem do erro
-        //Um mensagem complementar sobre o erro
-        var Status = 'Erro 404';
-        var mensagem = 'Desculpe mas sua página não foi encontrada';
-        var sub_mensagem = 'Tente fazer seu, login novamente';
-
-        //Constante usada para a criação da estrutura, sendo usada para apresentar todo o painel
-        const erro = document.getElementById('entrada_1');
-
-        erro.innerHTML = '<section class="matriz_404" id="cap">'
-            +
-            '<section class="paineis_1"><div class="cap"><h1>' + Status + '</h1></div></section>'
-            +
-            '<section class="paineis_2">'
-            +
-            '<div class="cap"><h2>' + mensagem + '</h2><p>' + sub_mensagem + '</p></div>'
-            +
-            '<div class="cap_2"><a href="/Sites/Site_ItGuys/ambiente_do_usu%C3%A1rio/login.html"><button>Retornar</button></a></div>'
-            +
-            '</section>'
-            +
-            '<div class="wave wave_1"></div>'
-            +
-            '<div class="wave wave_2"></div>'
-            +
-            '<div class="wave wave_3"></div>'
-            +
-            '<div class="wave wave_4"></div>'
-            +
-            '</section>'
-            ;
-
-
-
-
-        console.error('Erro ao criar blocos:', error);
-
-
-
-    }
-}
-
-
-
-// Função para carregar uma imagem protegida com token JWT e exibi-la
-
-async function loadImage(url, imgElementClass) {
-    try {
-        const token = getAuthToken();
-        console.log('Token:', token);
-        console.log('URL da imagem:', url);
-
-        const response = await fetch(url, {
-            method: 'GET',
-            headers: {
-                'x-access-token': token ? token : ''
-            }
-        });
-
-        if (!response.ok) {
-            throw new Error('Erro ao carregar a imagem: ' + response.statusText);
-        }
-
-        const blob = await response.blob();
-        const imageUrl = URL.createObjectURL(blob);
-
-        // Seleciona todos os elementos com a classe
-        const imgElements = document.getElementsByClassName(imgElementClass);
-        if (imgElements.length > 0) {
-            for (let i = 0; i < imgElements.length; i++) {
-                imgElements[i].src = imageUrl;
-            }
-        } else {
-            console.warn('Nenhum elemento encontrado com a classe:', imgElementClass);
-        }
-
-        return imageUrl; // Retorna a URL da imagem carregada
-    } catch (error) {
-        console.error('Erro ao carregar a imagem:', error);
-        console.log('Classe do elemento:', imgElementClass);
-        return null; // Retorna null em caso de erro
-    }
-}
-// Função para carregar a imagem de fundo
-async function loadBackgroundAndUpdateStyle() {
-    try {
-        const apiUrl = await getApiUrl();
-        const token = getAuthToken();
-        const response = await fetch(`${apiUrl}/mounting`, {
-            method: 'GET',
-            headers: {
-                'x-access-token': token ? token : ''
-            }
-        });
-
-        if (!response.ok) {
-            throw new Error('Erro ao carregar os dados: ' + response.statusText);
-        }
-
-        const data = await response.json();
-        const imagemFun = `${apiUrl}${data.usuario.img_fundo}`;
-
-        const fundoResponse = await fetch(imagemFun, {
-            method: 'GET',
-            headers: {
-                'x-access-token': token ? token : ''
-            }
-        });
-
-        if (!fundoResponse.ok) {
-            throw new Error('Erro ao carregar a imagem de fundo: ' + fundoResponse.statusText);
-        }
-
-        const blob = await fundoResponse.blob();
-        const fundoUserUrl = URL.createObjectURL(blob);
-
-        const fundouser = document.getElementById('fundouser');
-        fundouser.innerHTML =
-            '.Corpo_1 .Colunas_1 {' +
-            'display: flex;' +
-            'flex-direction: row;' +
-            'background-image: url("' + fundoUserUrl + '");' +
-            'background-position: center;' +
-            'background-size: cover;' +
-            'width: 15vw;' +
-            'height: 10vh;' +
-            'overflow: hidden;' +
-            'transition: 1s ease;' +
-            '}';
-
-        console.log('Imagem de fundo carregada e estilo aplicado com sucesso.');
-    } catch (error) {
-        console.error('Erro ao carregar a imagem de fundo:', error);
-    }
-}
-
-// Inicia o carregamento das imagens quando o script for carregado
-document.addEventListener('DOMContentLoaded', async () => {
-    await criarBlocos();
-    await loadBackgroundAndUpdateStyle();
-});
--- a/login.html
+++ b/login.html
@ -69,7 +69,7 @@

                            <!--caixa de entrada para a senha do usuário, tendo a classe Senha_input para estilizar ela-->
                            <input class="Senha_input" type="password" name="senha" id="password"
-                                placeholder="escreva sua senha" writingsuggestions="on" autocomplete="new-password">
+                                placeholder="escreva sua senha" writingsuggestions="on" autocomplete="password">
                        </div>

                        <div id="errorMessage" class="error-message"></div>