Merge pull request #1 from faustinopsy/SPA-10-evolucao-OO-notificaNews

Spa 10 evolucao oo notifica news

Author: faustinopsy

.htaccess

@@ -0,0 +1,53 @@
+# Cache de imagens por 1 mês
+<FilesMatch "\.(jpg|jpeg|png|gif|ico)$">
+    Header set Cache-Control "max-age=2592000, assets"
+</FilesMatch>
+
+# Cache de CSS e JS por 1 semana
+<FilesMatch "\.(css|js)$">
+    Header set Cache-Control "max-age=604800, assets"
+</FilesMatch>
+<IfModule mod_deflate.c>
+    # Ativar a compactação
+    SetOutputFilter DEFLATE
+
+    # Não compactar recursos MIME específicos
+    SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png)$ no-gzip dont-vary
+    SetEnvIfNoCase Request_URI \.(?:exe|t?gz|zip|bz2|sit|rar)$ no-gzip dont-vary
+    SetEnvIfNoCase Request_URI \.pdf$ no-gzip dont-vary
+
+    # Permitir a compactação somente para navegadores específicos
+    BrowserMatch ^Mozilla/4 gzip-only-text/html
+    BrowserMatch ^Mozilla/4\.0[678] no-gzip
+    BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
+</IfModule>
+#caso queiram URL amigáveis em projetos próprios
+#abaixo consegue trocar ult ou retirar extensão
+#só serve para hospedagem que roda apache/php
+# <IfModule mod_rewrite.c>
+#     RewriteEngine On
+#     RewriteCond %{REQUEST_FILENAME} !-f
+#     RewriteCond %{REQUEST_FILENAME} !-d
+#     RewriteRule ^(.*)$ /#$1 [L,NE,R=302]
+# </IfModule>
+
+# Ativar regras de reescrita
+RewriteEngine On
+
+# Forçar HTTPS
+RewriteCond %{HTTPS} off
+RewriteRule ^ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]
+
+# Segurança Transport Layer Security (HSTS)
+Header always set Strict-Transport-Security "max-age=31536000; includeSubDomains; preload"
+# Prevenir MIME-sniffing
+Header always set X-Content-Type-Options "nosniff"
+# Política de Segurança de Conteúdo (CSP)
+Header always set Content-Security-Policy "default-src 'none'; script-src 'self'; img-src 'self'; style-src 'self' 'unsafe-inline'; font-src 'self'; connect-src 'self'; worker-src 'self'; manifest-src 'self'; child-src 'none'; frame-ancestors 'none'; upgrade-insecure-requests;"
+# Bloquear frames/iframe
+Header always set X-Frame-Options "DENY"
+# Proteção contra Cross-Site Scripting (XSS)
+Header always set X-XSS-Protection "1; mode=block"
+# Assegurar que o Content-Type seja seguido
+Header always set X-Content-Type-Options "nosniff"
+

assets/css/w3.css

@@ -0,0 +1,48 @@
+{
+    "font_size": "Font Size:",
+    "small": "Small",
+    "medium": "Medium",
+    "large": "Large",
+    "xlarge": "E.Large",
+    "xxlarge": "X.Large",
+    "dark_mode": "Dark Mode:",
+    "language": "Language:",
+    "english": "English",
+    "portuguese": "Portuguese",
+    "spanish": "Spanish",
+    "page_contact": "Contact Page",
+    "contact_form": "Contact Form",
+    "name": "Name",
+    "subject": "Subject",
+    "message": "Message",
+    "send_button": "Send",
+    "mini_spa": "SPA en",
+    "home": "Home",
+    "about": "About",
+    "contact": "Contact",
+    "extra": "Extra",
+    "settings": "Settings",
+    "page_extra": "Extra Page",
+    "page_home": "Home Page",
+    "page_about": "About Page",
+    "hello_layout": "Hello W3.CSS Layout.",
+    "page_settings": "Settings Page",
+    "settings_menu": "Settings Menu",
+    "choose_background_image": "Choose a background image:",
+    "apply_background_button": "Apply Background Image",
+    "save_settings_button": "Save Settings",
+    "reset-settings" : "Reset Settings",
+    "details": "Details",
+    "open": "Open",
+    "install_app": "Install App",
+    "install_prompt": "Want to install for a full experience?",
+    "install": "Install",
+    "cancel": "Cancel",
+    "backdrop_filter": "Backdrop Filter",
+    "background_color": "Background Color",
+    "text_color": "text color",
+    "font_type": "font type",
+    "confirmation_prompt": "Are you sure you want to clear the settings?",
+    "settings_reset": "The settings have been reset to defaults.",
+    "action_cancelled":"Action cancelled. The settings have not been changed."
+}

assets/i18n/en.json

@@ -0,0 +1,48 @@
+{
+    "font_size": "Tamaño de Fuente:",
+    "small": "Pequeño",
+    "medium": "Mediano",
+    "large": "Grande",
+    "xlarge": "E.Grande",
+    "xxlarge": "X.Grande",
+    "dark_mode": "Modo Oscuro:",
+    "language": "Idioma:",
+    "english": "Inglés",
+    "portuguese": "Portugués",
+    "spanish": "Español",
+    "page_contact": "Página de contacto",
+    "contact_form": "Formulario de contacto",
+    "name": "Nombre",
+    "subject": "Asunto",
+    "message": "Mensaje",
+    "send_button": "Enviar",
+    "mini_spa": "SPA es",
+    "home": "Inicio",
+    "about": "Acerca de",
+    "contact": "Contacto",
+    "extra": "Extra",
+    "settings": "Configuración",
+    "page_extra": "Página Extra",
+    "page_home": "Página de Inicio",
+    "page_about": "Página sobre",
+    "hello_layout": "Hola Diseño W3.CSS.",
+    "page_settings": "Página de Configuraciones",
+    "settings_menu": "Menú de Configuraciones",
+    "choose_background_image": "Elija una imagen de fondo:",
+    "apply_background_button": "Aplicar Imagen de Fondo",
+    "save_settings_button": "Guardar Configuraciones",
+    "reset-settings" : "Limpar Configuraciones",
+    "details": "Detalles",
+    "open": "Abrir",
+    "install_app": "Instalar Aplicación",
+    "install_prompt": "¿Quieres instalar para una experiencia completa?",
+    "install": "Instalar",
+    "cancel": "Cancelar",
+    "backdrop_filter": "Filtro de Telón",
+    "background_color": "Color de Fondo",
+    "text_color": "Color del texto",
+    "font_type": "Tipo de fuente",
+    "confirmation_prompt": "¿Está seguro de que desea limpiar las configuraciones?",
+    "settings_reset": "Las configuraciones han sido restablecidas a los valores predeterminados.",
+    "action_cancelled":"Acción cancelada. Las configuraciones no han sido cambiadas."
+}

assets/i18n/es.json

@@ -0,0 +1,48 @@
+{
+    "font_size": "Tamanho da Fonte:",
+    "small": "Pequeno",
+    "medium": "Médio",
+    "large": "Grande",
+    "xlarge": "E.Grande",
+    "xxlarge": "X.Grande",
+    "dark_mode": "Modo Escuro:",
+    "language": "Idioma:",
+    "english": "Inglês",
+    "portuguese": "Português",
+    "spanish": "Espanhol",
+    "page_contact": "Página de contato",
+    "contact_form": "Formulário de contato",
+    "name": "Nome",
+    "subject": "Assunto",
+    "message": "Mensagem",
+    "send_button": "Enviar",
+    "mini_spa": "SPA br",
+    "home": "Início",
+    "about": "Sobre",
+    "contact": "Contato",
+    "extra": "Extra",
+    "settings": "Configuração",
+    "page_extra": "Página Extra",
+    "page_home": "Página Inicial",
+    "page_about": "Página sobre",
+    "hello_layout": "Olá Layout W3.CSS.",
+    "page_settings": "Página de Configurações",
+    "settings_menu": "Menu de Configurações",
+    "choose_background_image": "Escolha uma imagem de fundo:",
+    "apply_background_button": "Aplicar Imagem de Fundo",
+    "save_settings_button": "Salvar Configurações",
+    "reset-settings" : "Limpar Configurações",
+    "details": "Detalhes",
+    "open": "Abrir",
+    "install_app": "Instalar Aplicativo",
+    "install_prompt": "Quer instalar para uma experiência completa?",
+    "install": "Instalar",
+    "cancel": "Cancelar",
+    "backdrop_filter": "Filtro de Fundo",
+    "background_color": "Cor de Fundo",
+    "text_color": "Cor do texto",
+    "font_type": "Tipo de letra",
+    "confirmation_prompt": "Você tem certeza que deseja limpar as configurações?",
+    "settings_reset": "As configurações foram redefinidas para os padrões.",
+    "action_cancelled":"Ação cancelada. As configurações não foram alteradas."
+}

assets/i18n/pt.json

@@ -0,0 +1,56 @@
+import rotas from './router.js';
+import Navbar from '../js/componentes/navbar.js';
+import Configuracoes from '../js/paginas/Configuracoes.js';
+import I18nService from '../js/libs/I18nService.js';
+import FloatingButton from '../js/componentes/floatingButton.js';
+class App {
+    constructor() {
+        this.nav = document.getElementById("nav");
+        this.conteudo = document.getElementById("app");
+        this.componenteAtual = null;
+        this.linguagem = new I18nService();
+        this.init();
+    }
+    
+    async init() {
+        await this.linguagem.loadTranslations();
+        this.configuracoes = new Configuracoes();
+        this.configuracoes.applySettings();
+        const floatingButton = new FloatingButton(this.linguagem, this.navegar.bind(this));
+        floatingButton.render();
+        const navbar = new Navbar();
+        this.nav.innerHTML = navbar.render(this.linguagem);
+        navbar.fixNavbarOnMobile();
+        navbar.afterRender();
+        window.addEventListener('resize', () => navbar.fixNavbarOnMobile());
+        window.addEventListener("hashchange", () => this.navegar(location.hash));
+        this.navegar(location.hash);
+    }
+
+    atualizarMeta(meta) {
+        document.title = meta.title;
+        document.querySelector('meta[name="description"]').content = meta.description;
+    }
+
+    async navegar(rota) {
+        const rotaAtual = rota || '#home';
+        const classeAtual = rotas[rotaAtual].component;
+        
+        if (this.componenteAtual && this.componenteAtual.destroy) {
+            this.componenteAtual.destroy();
+        }
+    
+        this.conteudo.innerHTML = '';
+        this.conteudo.innerHTML = classeAtual.render(this.linguagem);
+        this.componenteAtual = classeAtual;
+        if (this.componenteAtual.afterRender) {
+            await this.componenteAtual.afterRender();
+        }
+        this.atualizarMeta(rotas[rotaAtual].meta);
+        document.documentElement.scrollTop = 0;
+    }
+    
+}
+
+const navegador = new App();
+

assets/img/config.webp

@@ -0,0 +1,68 @@
+class Atualizacoes {
+    constructor() {
+        this.listenForHashChange();
+        this.listenForSWMessages();
+        this.createNotificationBox(); 
+    }
+
+    listenForHashChange() {
+        window.addEventListener('hashchange', () => {
+            if (location.hash === '#home' || location.hash === '#') {
+                navigator.serviceWorker.controller.postMessage({
+                    action: 'checkForUpdates'
+                });
+            }
+        }, false);
+    }
+
+    listenForSWMessages() {
+        navigator.serviceWorker.addEventListener('message', event => {
+            if (event.data.type === 'UPDATE_AVAILABLE') {
+                this.handleUpdateAvailable(event.data.ultimaModificacao);
+            }
+        });
+    }
+
+    handleUpdateAvailable(ultimaModificacao) {
+        const ultimaDataSalva = localStorage.getItem('ultimaModificacao');
+        if (!ultimaDataSalva || new Date(ultimaModificacao) > new Date(ultimaDataSalva)) {
+            console.log('Nova atualização disponível!');
+            localStorage.setItem('ultimaModificacao', ultimaModificacao);
+            this.showNotification();
+        }
+    }
+
+    createNotificationBox() {
+        if (!document.getElementById('notificationBox')) {
+            const notificationBox = document.createElement('div');
+            notificationBox.id = 'notificationBox';
+            notificationBox.className = 'notification-box hidden'; 
+            notificationBox.innerHTML = `
+            <p> ☄️🚀☄️ news!</p>
+            <img src="./assets/img/notifica.webp" alt="Notifica" style="width:100px">
+            `;
+
+            document.body.appendChild(notificationBox); 
+        }
+    }
+
+    showNotification() {
+        const notificationBox = document.getElementById('notificationBox');
+        if (!notificationBox) this.createNotificationBox(); 
+        notificationBox.classList.remove('hidden');
+        notificationBox.classList.add('show');
+        
+        setTimeout(() => {
+            notificationBox.classList.remove('show');
+            setTimeout(() => { 
+                notificationBox.classList.add('hidden');
+            }, 500);
+        }, 10000); 
+    }
+}
+
+if (document.readyState === 'loading') {  
+    document.addEventListener('DOMContentLoaded', () => new Atualizacoes());
+} else {  
+    new Atualizacoes();
+}