@privacyscrubber/sdk 2.0.2

package/shared-ui.js

@@ -0,0 +1,533 @@
+import '../scripts/ps-license-manager.js';
+/**
+ * PrivacyScrubber Global UI & Licensing Module
+ * Source of truth for user tier status across the entire platform.
+ */
+
+import { openModal, closeModal, hydrateLazyModal } from './ui-modals.js';
+
+export const UI_STATE = {
+    isPro: false,
+    isTeam: false,
+    tier: 'FREE'
+};
+
+/**
+ * ZTDS License Generation Logic (v1.4.2 Hardened)
+ * Generates a cryptographically verified key with a salted position-aware checksum.
+ * Exclusively used by app.js for local auto-activation and ztds-keygen-ops.html.
+ */
+export const generateLicenseKey = (tier = "PRO") => {
+    const chars = 'ABCDEFGHJKLMNPQRSTUVWXYZ23456789'; // Avoid ambiguous O/0/I/1
+    let core = '';
+    const cryptoObj = window.crypto || window.msCrypto;
+    const randomValues = new Uint32Array(8);
+    cryptoObj.getRandomValues(randomValues);
+    
+    for (let i = 0; i < 8; i++) {
+        core += chars.charAt(randomValues[i] % chars.length);
+    }
+
+    const salt = "ZTDS_SALT_2026_!@#";
+    const input = core + salt + tier;
+    let sum = 0;
+    // Position-aware weighted checksum
+    for (let i = 0; i < input.length; i++) {
+        sum += input.charCodeAt(i) * (i + 1);
+    }
+
+    const checksum = (sum % 9999).toString().padStart(4, '0');
+    return `PS-${tier}-${core}-${checksum}`;
+};
+
+/**
+ * Standard license validator used site-wide.
+ * Hardened in v1.4.2 to use salted, weighted checksums.
+ */
+export const validateLicenseKey = (key, mockTime = null) => {
+    if (typeof globalThis.LicenseManager === 'undefined') {
+        console.error('[PrivacyScrubber] LicenseManager not loaded!');
+        return null;
+    }
+    
+    let result = globalThis.LicenseManager.validate(key, {
+        mockTime: mockTime,
+        storage: typeof localStorage !== 'undefined' ? localStorage : null,
+        onAnomaly: () => {
+            if (typeof window.PrivacyScrubberUI?.showStatus === 'function') {
+                window.PrivacyScrubberUI.showStatus("System clock anomaly detected. License locked.", "error", 10000);
+            }
+        },
+        onExpired: (type) => {
+            if (typeof window.PrivacyScrubberUI?.showStatus === 'function' && mockTime === null) {
+                window.PrivacyScrubberUI.showStatus("Your License/Pilot has expired.", "error", 10000);
+            }
+        }
+    });
+    
+    return result.valid ? result.tier : null;
+};
+
+/**
+ * Synchronizes navigation buttons and site-wide badges with current license state.
+ * Targets all platform navigation variations (Desktop, Mobile, Drawer).
+ */
+export const updateGlobalTierUI = () => {
+    const btnConfigs = [
+        { id: 'psNavProBtn', tSuffix: '1', proText: 'Dashboard', teamText: 'Dashboard' },
+        { id: 'psNavProBtnMobile', tSuffix: 'Mobile', proText: 'Dashboard', teamText: 'Dashboard' },
+        { id: 'psNavProBtnDrawer', tSuffix: 'Drawer', proText: 'Dashboard', teamText: 'Dashboard' }
+    ];
+
+    const isSdk = UI_STATE.isSdk || !!localStorage.getItem('ps_sdk_key') || localStorage.getItem('ps_license_type') === 'SDK';
+    const isTeam = isSdk || UI_STATE.isTeam || !!localStorage.getItem('ps_team_key');
+    const isPro = UI_STATE.isPro || isTeam || isSdk || !!localStorage.getItem('ps_pro_key') || !!localStorage.getItem('ps_pro_sub');
+
+    btnConfigs.forEach(cfg => {
+        const btn = document.getElementById(cfg.id);
+        if (!btn) return;
+
+        if (isTeam || isPro) {
+            // Emerald/Teal Theme for Active Licenses (except desktop link)
+            if (cfg.id === 'psNavProBtn') {
+                btn.style.background = 'transparent';
+                btn.style.color = isSdk ? '#06b6d4' : (isTeam ? '#10b981' : '#3b82f6');
+            } else {
+                btn.style.background = isSdk ? 'linear-gradient(to right, #06b6d4, #3b82f6)' : (isTeam ? 'linear-gradient(to right, #10b981, #14b8a6)' : 'linear-gradient(to right, #10b981, #3b82f6)');
+            }
+            btn.classList.add('ps-pro-active-theme');
+
+            
+            const dot = document.getElementById('psLiveDot' + cfg.tSuffix);
+            const icon = document.getElementById('psProIcon' + cfg.tSuffix);
+            const text = document.getElementById('psProText' + cfg.tSuffix);
+            
+            if (dot) dot.style.display = 'none';
+            if (icon) {
+                icon.style.display = 'inline-block';
+                icon.className = '';
+                icon.innerHTML = isSdk ? '<svg class="w-4 h-4 mr-1.5 inline-block"><use href="#icon-code"></use></svg>' : (isTeam ? '<svg class="w-4 h-4 mr-1.5 inline-block"><use href="#icon-users"></use></svg>' : '<svg class="w-4 h-4 mr-1.5 inline-block"><use href="#icon-crown"></use></svg>');
+            }
+            if (text) text.innerText = isSdk ? 'SDK' : (isTeam ? cfg.teamText : cfg.proText);
+        }
+    });
+
+    const toolTierBadge = document.getElementById('tool-tier-badge');
+    if (toolTierBadge) {
+        if (isSdk) {
+            toolTierBadge.textContent = 'SDK';
+            toolTierBadge.className = 'px-2 py-0.5 rounded text-tiny font-black bg-neon-cyan/20 text-neon-cyan border border-neon-cyan/30 uppercase tracking-tighter';
+        } else if (isTeam) {
+            toolTierBadge.textContent = 'TEAM';
+            toolTierBadge.className = 'px-2 py-0.5 rounded text-tiny font-black bg-neon-purple/20 text-neon-purple border border-neon-purple/30 uppercase tracking-tighter';
+        } else if (isPro) {
+            toolTierBadge.textContent = 'PRO';
+            toolTierBadge.className = 'px-2 py-0.5 rounded text-tiny font-black bg-neon-blue/20 text-neon-blue border border-neon-blue/30 uppercase tracking-tighter';
+        }
+    }
+};
+
+/**
+ * Calculates SHA-256 hash using native Web Crypto API.
+ */
+const getSHA256 = async (text) => {
+    if (!text) return '';
+    try {
+        const msgBuffer = new TextEncoder().encode(text.trim());
+        const hashBuffer = await crypto.subtle.digest('SHA-256', msgBuffer);
+        const hashArray = Array.from(new Uint8Array(hashBuffer));
+        return hashArray.map(b => b.toString(16).padStart(2, '0')).join('');
+    } catch (e) {
+        console.error('[PrivacyScrubber] SHA-256 hashing failed:', e);
+        return '';
+    }
+};
+
+/**
+ * Checks all active license keys against the Key Revocation List (KRL).
+ * Runs asynchronously in the background.
+ */
+const checkKeyRevocation = async () => {
+    const keys = [];
+    ['ps_pro_key', 'ps_pro_sub', 'ps_team_key'].forEach(k => {
+        const val = localStorage.getItem(k);
+        if (val) keys.push({ key: k, val: val.trim() });
+    });
+    if (keys.length === 0) return;
+
+    // Silent key upgrade for legacy formats
+    if (typeof navigator !== 'undefined' && navigator.onLine) {
+        for (const item of keys) {
+            const val = item.val.toUpperCase();
+            if (!val.startsWith('PS-RSA-') && !val.startsWith('PS-PILOT-')) {
+                try {
+                    const upgradeUrl = window.location.origin + '/api/upgrade-key';
+                    const resUpgrade = await fetch(upgradeUrl, {
+                        method: 'POST',
+                        headers: { 'Content-Type': 'application/json' },
+                        body: JSON.stringify({ oldKey: item.val })
+                    });
+                    if (resUpgrade.ok) {
+                        const dataUpgrade = await resUpgrade.json();
+                        if (dataUpgrade && dataUpgrade.success && dataUpgrade.key) {
+                            localStorage.setItem(item.key, dataUpgrade.key);
+                            setTimeout(() => {
+                                initSharedUI();
+                            }, 50);
+                            return; // Stop current check, re-triggered by initSharedUI()
+                        }
+                    }
+                } catch (e) {
+                    console.warn('[PrivacyScrubber] Failed to silently upgrade key:', e.message);
+                }
+            }
+        }
+    }
+
+    let revokedHashes = [];
+    const now = Date.now();
+    const lastFetch = parseInt(localStorage.getItem('ps_krl_last_fetch') || '0', 10);
+    const cachedKRL = localStorage.getItem('ps_krl_cache');
+
+    if (cachedKRL) {
+        try {
+            revokedHashes = JSON.parse(cachedKRL);
+        } catch (e) {}
+    }
+
+    // Refresh KRL once every 24 hours if online
+    if ((now - lastFetch > 86400000 || !cachedKRL) && typeof navigator !== 'undefined' && navigator.onLine) {
+        try {
+            const url = window.location.origin + '/revoked-keys.json';
+            const response = await fetch(url);
+            if (response.ok) {
+                const data = await response.json();
+                if (data && Array.isArray(data.revoked)) {
+                    revokedHashes = data.revoked;
+                    localStorage.setItem('ps_krl_cache', JSON.stringify(data.revoked));
+                    localStorage.setItem('ps_krl_last_fetch', now.toString());
+                }
+            }
+        } catch (err) {
+            console.warn('[PrivacyScrubber] Failed to refresh revocation list:', err.message);
+        }
+    }
+
+    let revokedAny = false;
+    for (const item of keys) {
+        const hash = await getSHA256(item.val);
+        if (hash && revokedHashes.includes(hash)) {
+            localStorage.removeItem(item.key);
+            revokedAny = true;
+        }
+    }
+
+    if (revokedAny) {
+        UI_STATE.isPro = false;
+        UI_STATE.isTeam = false;
+        UI_STATE.tier = 'FREE';
+        window.isPro = false;
+        window.isTeam = false;
+        updateGlobalTierUI();
+        alert('⚠️ [PrivacyScrubber] Your license key has been deactivated. Please contact support@privacyscrubber.com if you believe this is an error.');
+    }
+};
+
+/**
+ * Bootstraps the UI state from storage and environment.
+ */
+export const initSharedUI = () => {
+    // 1. Resolve Initial State from Storage
+    const proKey = localStorage.getItem('ps_pro_key');
+    const proSub = localStorage.getItem('ps_pro_sub');
+    const teamKey = localStorage.getItem('ps_team_key');
+    
+    // Purge legacy insecure flags (v1.4.2 Cleanup)
+    ['isPro', 'ps_pro_v1', 'ps_pro_lifetime', 'ps_team_v1'].forEach(f => {
+        if (localStorage.getItem(f)) localStorage.removeItem(f);
+    });
+
+    let pTier = validateLicenseKey(proKey) || validateLicenseKey(proSub);
+    let tTier = validateLicenseKey(teamKey);
+    
+    // 2. Update Source of Truth (UI_STATE)
+    const hasTeamKey = !!teamKey;
+    const hasProKey = !!proKey || !!proSub;
+    UI_STATE.isTeam = (tTier === 'TEAMS' || pTier === 'TEAMS' || hasTeamKey);
+    UI_STATE.isPro = (UI_STATE.isTeam || !!pTier || hasProKey);
+    
+    UI_STATE.tier = UI_STATE.isTeam ? 'TEAMS' : (UI_STATE.isPro ? 'PRO' : 'FREE');
+    
+    // Sync to legacy window globals
+    window.isPro = UI_STATE.isPro;
+    window.isTeam = UI_STATE.isTeam;
+
+    // 2. Override from URL (Query or Hash)
+    const urlParams = new URLSearchParams(window.location.search);
+    let keyParam = urlParams.get('key');
+    if (!keyParam && window.location.hash) {
+        const hashStr = window.location.hash.substring(1);
+        const match = hashStr.match(/(?:^|&)key=([^&]+)/);
+        if (match) keyParam = decodeURIComponent(match[1]);
+    }
+    if (keyParam) {
+        let tier = validateLicenseKey(keyParam);
+        if (/^(I-|sub_|txn_|chk_)/.test(keyParam)) {
+            tier = 'TEAMS';
+        }
+        if (tier === 'TEAMS') {
+            UI_STATE.isTeam = true;
+            UI_STATE.isPro = true;
+            localStorage.setItem('ps_team_key', keyParam.trim());
+        } else if (tier === 'PRO') {
+            UI_STATE.isPro = true;
+            localStorage.setItem('ps_pro_key', keyParam.trim());
+        }
+        // Clear the key from URL to prevent history/proxy leaks
+        if (urlParams.has('key')) {
+            urlParams.delete('key');
+            const newSearch = urlParams.toString() ? '?' + urlParams.toString() : '';
+            window.history.replaceState({}, '', window.location.pathname + newSearch + window.location.hash);
+        } else if (window.location.hash.includes('key=')) {
+            const cleanHash = window.location.hash.replace(/#?key=[^&]+&?/, '').replace(/&$/, '');
+            window.history.replaceState({}, '', window.location.pathname + window.location.search + (cleanHash ? '#' + cleanHash : ''));
+        }
+        
+        // Update globals again
+        window.isPro = UI_STATE.isPro;
+        window.isTeam = UI_STATE.isTeam;
+
+        setTimeout(() => {
+            if (typeof window.showStatus === 'function') {
+                window.showStatus(`🛡️ ${tier === 'TEAMS' ? 'TEAMS Governance' : 'PRO Edition'} License Activated!`, 'success');
+            }
+            if ((tier === 'TEAMS' || tier === 'PRO') && typeof window.openTeamModal === 'function') {
+                window.openTeamModal(true);
+            }
+        }, 400);
+    }
+    
+    updateGlobalTierUI();
+
+    if (typeof window !== 'undefined') {
+        const handleUrlTriggers = () => {
+            const hash = window.location.hash.toLowerCase();
+            const search = window.location.search.toLowerCase();
+
+            if (hash === '#teams' || search.includes('tier=teams') || search.includes('action=teams')) {
+                setTimeout(() => {
+                    if (typeof window.openTeamsModal === 'function') window.openTeamsModal();
+                    else if (typeof window.openTierModal === 'function') window.openTierModal('TEAMS');
+                }, 200);
+            } else if (hash === '#pro' || search.includes('tier=pro') || search.includes('action=pro')) {
+                setTimeout(() => {
+                    if (typeof window.openTierModal === 'function') window.openTierModal('PRO');
+                }, 200);
+            } else if (hash === '#dashboard' || search.includes('dashboard=1') || search.includes('action=dashboard')) {
+                setTimeout(() => {
+                    if (UI_STATE.isTeam || UI_STATE.isPro) {
+                        if (typeof window.openTeamModal === 'function') window.openTeamModal(true);
+                    } else {
+                        if (typeof window.openTierModal === 'function') window.openTierModal('TEAMS');
+                    }
+                }, 200);
+            } else if (hash === '#ai') {
+                setTimeout(() => {
+                    const tabAI = document.getElementById('modeTabAI');
+                    if (tabAI) {
+                        tabAI.click();
+                        window.scrollTo({ top: 0, behavior: 'smooth' });
+                    }
+                }, 100);
+            } else if (hash === '#doc') {
+                setTimeout(() => {
+                    const tabDoc = document.getElementById('modeTabDoc');
+                    if (tabDoc) {
+                        tabDoc.click();
+                        window.scrollTo({ top: 0, behavior: 'smooth' });
+                    }
+                }, 100);
+            }
+        };
+
+        handleUrlTriggers();
+        window.addEventListener('hashchange', handleUrlTriggers);
+    }
+    if (typeof window !== 'undefined' && window.crypto && window.crypto.subtle) {
+        checkKeyRevocation().catch(err => console.error('[PrivacyScrubber] Revocation check error:', err));
+    }
+    
+    // Expose refreshAppState for PayPal post-payment re-init
+    window.refreshAppState = () => {
+        initSharedUI();
+    };
+};
+
+// Expose to window for legacy scripts (app.js, nav.js)
+if (typeof window !== 'undefined') {
+    window.PrivacyScrubberUI = { 
+        UI_STATE, 
+        validateLicenseKey, 
+        generateLicenseKey,
+        updateGlobalTierUI, 
+        initSharedUI,
+        openModal,
+        closeModal,
+        hydrateLazyModal
+    };
+    
+    // Expose generation directly to window for app.js integration
+    window.generateLicenseKey = generateLicenseKey;
+    window.validateLicenseKey = validateLicenseKey;
+    
+    // Auto-init on load
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', initSharedUI);
+    } else {
+        initSharedUI();
+    }
+
+    // Global Wrappers for Legacy/External Scripts
+    window.openTierModal = (tier) => {
+        window.PrivacyScrubberUI.openModal('tierModal', 'tierModalContent');
+        if (tier && typeof window.switchTierView === 'function') {
+            window.switchTierView('checkout', tier);
+        }
+    };
+
+    window.closeTierModal = () => {
+        window.PrivacyScrubberUI.closeModal('tierModal', 'tierModalContent');
+        const banner = document.getElementById('checkoutContextBanner');
+        if (banner) banner.classList.add('hidden');
+    };
+
+    window.applyModalContext = (context = {}) => {
+        const banner = document.getElementById('checkoutContextBanner');
+        const bannerTitle = document.getElementById('contextBannerTitle');
+        const bannerSubtitle = document.getElementById('contextBannerSubtitle');
+        const bannerIcon = document.getElementById('contextBannerIcon');
+        const title = document.getElementById('checkoutTitle');
+        const subtitle = document.getElementById('checkoutSubtitle');
+        const mTitle = document.getElementById('checkoutMobileTitle');
+
+        if (!context || !context.type) {
+            if (banner) banner.classList.add('hidden');
+            return;
+        }
+
+        if (banner) banner.classList.remove('hidden');
+
+        if (context.type === 'profile') {
+            const prof = (window.INDUSTRY_PROFILES || []).find(p => p.id === context.profileId) || { label: context.profileId || 'Specialized Profile', title: 'Custom PII pattern protection.' };
+            if (banner) {
+                banner.className = 'mb-6 p-4 rounded-xl border border-amber-500/30 bg-amber-500/10 backdrop-blur-md';
+            }
+            if (bannerIcon) {
+                bannerIcon.className = 'w-8 h-8 rounded-lg bg-amber-500/20 text-amber-400 flex items-center justify-center shrink-0';
+                bannerIcon.innerHTML = '<i class="fa-solid fa-shield-halved text-sm"></i>';
+            }
+            if (bannerTitle) bannerTitle.textContent = `${prof.label} — 5,000 Chars Quota Limit`;
+            if (bannerSubtitle) bannerSubtitle.textContent = `Free 24-hour trial quota for ${prof.label} reached. Upgrade to PRO for unlimited redaction.`;
+            if (title) title.textContent = `${prof.label.toUpperCase()} UNLOCK`;
+            if (subtitle) subtitle.textContent = `Unlimited ${prof.label} Processing`;
+            if (mTitle) mTitle.textContent = `${prof.label.toUpperCase()} UNLOCK`;
+        } else if (context.type === 'audit_receipt') {
+            if (banner) {
+                banner.className = 'mb-6 p-4 rounded-xl border border-blue-500/30 bg-blue-500/10 backdrop-blur-md';
+            }
+            if (bannerIcon) {
+                bannerIcon.className = 'w-8 h-8 rounded-lg bg-blue-500/20 text-neon-blue flex items-center justify-center shrink-0';
+                bannerIcon.innerHTML = '<i class="fa-solid fa-file-shield text-sm"></i>';
+            }
+            if (bannerTitle) bannerTitle.textContent = 'Trial Audit Receipt Generated';
+            if (bannerSubtitle) bannerSubtitle.textContent = 'Remove the "TRIAL / UNVERIFIED" watermark and activate tamper-evident SHA-256 compliance proofs.';
+            if (title) title.textContent = 'CISO AUDIT CERTIFICATE UNLOCK';
+            if (subtitle) subtitle.textContent = 'Official Compliance Proofs (SOC 2, GDPR, HIPAA)';
+            if (mTitle) mTitle.textContent = 'CISO AUDIT UNLOCK';
+        } else if (context.type === 'bulk_files') {
+            const count = context.fileCount || 'Batch';
+            if (banner) {
+                banner.className = 'mb-6 p-4 rounded-xl border border-emerald-500/30 bg-emerald-500/10 backdrop-blur-md';
+            }
+            if (bannerIcon) {
+                bannerIcon.className = 'w-8 h-8 rounded-lg bg-emerald-500/20 text-neon-green flex items-center justify-center shrink-0';
+                bannerIcon.innerHTML = '<i class="fa-solid fa-layer-group text-sm"></i>';
+            }
+            if (bannerTitle) bannerTitle.textContent = `${count} Files Detected · 1 File Free Limit`;
+            if (bannerSubtitle) bannerSubtitle.textContent = 'Sanitize 50+ batch documents, Excel spreadsheets, and scanned PDFs simultaneously in local RAM.';
+            if (title) title.textContent = 'BULK & OFFLINE OCR UNLOCK';
+            if (subtitle) subtitle.textContent = 'Unlimited Batch & OCR Processing';
+            if (mTitle) mTitle.textContent = 'BULK & OCR UNLOCK';
+        } else if (context.type === 'teams_handoff') {
+            if (banner) {
+                banner.className = 'mb-6 p-4 rounded-xl border border-purple-500/30 bg-purple-500/10 backdrop-blur-md';
+            }
+            if (bannerIcon) {
+                bannerIcon.className = 'w-8 h-8 rounded-lg bg-purple-500/20 text-neon-purple flex items-center justify-center shrink-0';
+                bannerIcon.innerHTML = '<i class="fa-solid fa-users text-sm"></i>';
+            }
+            if (bannerTitle) bannerTitle.textContent = 'Teams Cryptographic Session Handoff';
+            if (bannerSubtitle) bannerSubtitle.textContent = 'Zero-server session handoff via XChaCha20-Poly1305 + centralized regex blueprints for your team.';
+            if (title) title.textContent = 'TEAMS HUB UNLOCK';
+            if (subtitle) subtitle.textContent = 'Unlimited Seats · $99/mo Flat Rate';
+            if (mTitle) mTitle.textContent = 'TEAMS HUB UNLOCK';
+        }
+    };
+
+    window.openContextualUpgradeModal = (context = {}) => {
+        const tier = (context && context.type === 'teams_handoff') ? 'TEAMS' : 'PRO';
+        window.openTierModal(tier);
+        setTimeout(() => {
+            if (typeof window.applyModalContext === 'function') {
+                window.applyModalContext(context);
+            }
+        }, 50);
+    };
+
+    /* ── v1.5.3 Performance: Lightweight tab visibility pause (no scroll thrashing) ── */
+    if (typeof window !== 'undefined') {
+        const CONTINUOUS_ANIM_SELECTOR = '.animate-pulse,.animate-ping,.animate-float-slow,.animate-handoff-flow,.border-beam,.demo-fo,.demo-fr,.btn-shine,#psContactFab';
+        
+        // Visibility change (pause heavy continuous animations only when tab is backgrounded)
+        document.addEventListener('visibilitychange', () => {
+            if (document.hidden) {
+                document.querySelectorAll(CONTINUOUS_ANIM_SELECTOR).forEach(el => {
+                    el.dataset.psPausedTab = '1';
+                    el.style.animationPlayState = 'paused';
+                });
+            } else {
+                document.querySelectorAll('[data-ps-paused-tab]').forEach(el => {
+                    el.style.animationPlayState = '';
+                    delete el.dataset.psPausedTab;
+                });
+            }
+        }, { passive: true });
+
+        // ── Airplane Mode / Offline Test Challenge Modal ──
+        window.showOfflineModal = function() {
+            const m = document.getElementById('offlineModal');
+            const c = document.getElementById('offlineModalCard');
+            if (!m || !c) return;
+            m.classList.remove('hidden');
+            m.classList.add('flex');
+            void c.offsetWidth;
+            requestAnimationFrame(() => {
+                c.classList.remove('scale-90', 'opacity-0');
+                c.classList.add('scale-100', 'opacity-100');
+            });
+        };
+        window.hideOfflineModal = function() {
+            window.offlineChallengeActive = true;
+            const m = document.getElementById('offlineModal');
+            const c = document.getElementById('offlineModalCard');
+            if (!m || !c) return;
+            c.classList.remove('scale-100', 'opacity-100');
+            c.classList.add('scale-90', 'opacity-0');
+            setTimeout(() => {
+                m.classList.remove('flex');
+                m.classList.add('hidden');
+            }, 300);
+        };
+    }
+}
+