new menubar mobile

gestaoRaul/templates/static/base.css

@@ -381,3 +381,123 @@ input, textarea, select {
       display: flex;
     }
 }
+
+
+
+
+
+
+
+
+
+
+.header-mobile {
+  display: none;
+  justify-content: space-between;
+  align-items: center;
+  background-color: #171525;
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
+  /* backdrop-filter: blur(5px); */
+  padding: 1rem;
+  padding-right: 50px;
+  padding-left: 10px;
+  position: fixed;
+  top: 0;
+  width: 100%;
+  z-index: 9999; 
+}
+
+.header-mobile .logo {
+  display: flex;
+  align-items: center;
+  margin-left: 25px;
+}
+
+.header-mobile .logo i {
+  color: #fbbf24;
+  font-size: 2rem;
+}
+
+.header-mobile .logo span {
+  
+  font-size: 1.25rem;
+  font-weight: bold;
+  margin-left: .5rem;
+}
+
+.header-mobile .nav-toggle {
+  display: block;
+  cursor: pointer;
+  background: none;
+  border: none;
+  padding-right: 0;
+  margin-right: 10;
+}
+
+.header-mobile .nav-toggle i {
+  color: white;
+  font-size: 1.5rem;
+}
+
+.header-mobile .nav-links {
+  max-width: 70%;
+  position: fixed;
+  top: 83px;
+  left: -100%; 
+  width: 100%;
+  height: 100vh;
+  background-color: #222033b9;
+  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.5);
+  backdrop-filter: blur(5px);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  transition: left 0.3s ease-in-out;
+  z-index: 9998;
+}
+
+.header-mobile .nav-links .nav-component{
+  width: 100%;
+  justify-items: center;
+  justify-content: space-between;
+}
+
+
+.header-mobile .nav-links.active {
+  left: 15%; 
+}
+
+.header-mobile .nav-links a {
+  color: #a0aec0;
+  text-decoration: none;
+  font-size: 1.2rem;
+  margin: 1rem 0;
+  display: block;
+  width: 90%;
+  text-align: center;
+  padding: 1rem;
+  transition: all 0.3s;
+}
+
+.header-mobile .nav-links a:hover {
+  color: white;
+  scale: 1.1;
+  background-color: #373543;
+  box-shadow: 0 0px 10px rgba(0, 0, 0, 0.5);
+  transition: all 0.3s ;
+}
+
+
+@media screen and (max-width: 768px) {
+  .background .bg1 {
+      max-height: 21.5%;
+  }
+  /* .nav-bar {
+      display: none;
+  } */
+
+  .header-mobile {
+      display: flex;
+  }
+}

gestaoRaul/templates/static/base.js

@@ -1,14 +1,39 @@
+
+
+document.addEventListener('DOMContentLoaded', function() {
+  const navToggle = document.querySelector('.nav-toggle');
+  const navLinks = document.querySelector('.nav-links');
+
+  if (navToggle) {
+    navToggle.addEventListener('click', function() {
+      navLinks.classList.toggle('active');
+    });
+  }
+  document.addEventListener('click', function(event) {
+    if (navLinks.classList.contains('active') && !navLinks.contains(event.target) && !navToggle.contains(event.target)) {
+      navLinks.classList.remove('active');
+    }
+  });
+});
+
+
+
+
+
+
+
+
+
 function verificarCookieNotificacao() {
-  console.log('cookie notificacao verificado');
+  var iconNotify = document.getElementById('icon-notify');
   if (document.cookie.indexOf('notificacao=') === -1) {
     document.cookie = 'notificacao=true; expires=Fri, 31 Dec 9999 23:59:59 GMT; path=/';
-    var iconNotify = document.getElementById('icon-notify');
     iconNotify.style.backgroundColor = 'green';
-    console.log('cookie notificacao criado');
+    iconNotify.textContent = '🔊';
   }else{
     let valorAtual = document.cookie.replace(/(?:(?:^|.*;\s*)notificacao\s*\=\s*([^;]*).*$)|^.*$/, "$1");
-    var iconNotify = document.getElementById('icon-notify');
     iconNotify.style.backgroundColor = valorAtual === 'true' ? 'green' : 'red';
+    iconNotify.textContent = valorAtual === 'true' ? '🔊' : '🔇';
   }
 }
 verificarCookieNotificacao();
@@ -20,8 +45,10 @@ function cookieNotificacao() {
     let novoValor = valorAtual === 'true' ? 'false' : 'true';
     if (novoValor === 'true') {
       iconNotify.style.backgroundColor = 'green';
+      iconNotify.textContent = '🔊';
     }else{
       iconNotify.style.backgroundColor = 'red';
+      iconNotify.textContent = '🔇';
     }
     document.cookie = 'notificacao=' + novoValor + '; expires=Fri, 31 Dec 9999 23:59:59 GMT; path=/';
   } else {
@@ -47,11 +74,9 @@ websocket.addEventListener('message', (event) => {
         var fila = document.getElementById('Fila').appendChild(novoElemento); 
         let valorAtual = document.cookie.replace(/(?:(?:^|.*;\s*)notificacao\s*\=\s*([^;]*).*$)|^.*$/, "$1");
         if (valorAtual === 'true') {
-          
           texto = new SpeechSynthesisUtterance(data.speak);
           window.speechSynthesis.speak(texto);
         }
-        console.log('Mensagem recebida:', data.local);
       }
       else if (document.getElementById('obs-'+data.id) !== null && data.tipo === 'edit'){
         const obs = document.getElementById('obs-'+data.id)
@@ -64,54 +89,41 @@ websocket.addEventListener('message', (event) => {
         texto = new SpeechSynthesisUtterance(data.speak);
         window.speechSynthesis.speak(texto);
         }
-        console.log('Mensagem recebida:', data.local);
       }
       else if (document.getElementById('m-card-'+data.id) !== null && data.tipo === 'delete'){
         const card = document.getElementById('m-card-'+data.id)
         card.style.backgroundColor = 'rgb(253, 69, 69)';
-        // obs.innerHTML = data.message;
         let valorAtual = document.cookie.replace(/(?:(?:^|.*;\s*)notificacao\s*\=\s*([^;]*).*$)|^.*$/, "$1");
-
         if (valorAtual === 'true') {
         texto = new SpeechSynthesisUtterance(data.speak);
         window.speechSynthesis.speak(texto);
         }
-        console.log('Mensagem recebida:', data.local);
       }
       
       break;
     case 'praca':
-      console.log('Código a ser executado se expressao === valor2')
+      console.log('Mensagem para a praca:', data);
       break;
-    case 'guarita':
-      // Código a ser executado se expressao === valor3
-      break;
-    case 'balcao':
-      // Código a ser executado se expressao === valor3
+      case 'guarita':
+        console.log('Mensagem para a guarita:', data);
+        break;
+        case 'balcao':
+      console.log('Mensagem para a balcao:', data);
       break;
     default:
       console.log('Local desconhecido:', data);
   }
 
-
-
-
-
-
 });
-
 websocket.addEventListener('error', (event) => {
   console.error('Erro no WebSocket:', event);
 });
-
 websocket.addEventListener('close', (event) => {
     console.log("conexão fechada");
 });
 
 
 
-
-
 function menuShow() {
     let menuMobile = document.querySelector('.mobile-menu');
     if (menuMobile.classList.contains('open')) {