script.js

// WebSocket connection manager
class QuantumWebSocket {
    constructor(url) {
        this.url = url;
        this.socket = null;
        this.reconnectAttempts = 0;
        this.maxReconnectAttempts = 5;
        this.reconnectDelay = 3000;
        this.listeners = {};
    }

    connect() {
        this.socket = new WebSocket(this.url);
        
        this.socket.onopen = () => {
            console.log('WebSocket connected');
            this.reconnectAttempts = 0;
        };

        this.socket.onmessage = (event) => {
            const data = JSON.parse(event.data);
            this.dispatchEvent(data.type, data.payload);
        };

        this.socket.onclose = () => {
            console.log('WebSocket disconnected');
            this.attemptReconnect();
        };

        this.socket.onerror = (error) => {
            console.error('WebSocket error:', error);
        };
    }

    addEventListener(type, callback) {
        if (!this.listeners[type]) {
            this.listeners[type] = [];
        }
        this.listeners[type].push(callback);
    }

    dispatchEvent(type, payload) {
        if (this.listeners[type]) {
            this.listeners[type].forEach(cb => cb(payload));
        }
    }

    attemptReconnect() {
        if (this.reconnectAttempts < this.maxReconnectAttempts) {
            this.reconnectAttempts++;
            console.log(`Attempting to reconnect (${this.reconnectAttempts}/${this.maxReconnectAttempts})`);
            setTimeout(() => this.connect(), this.reconnectDelay);
        }
    }

    send(type, payload) {
        if (this.socket.readyState === WebSocket.OPEN) {
            this.socket.send(JSON.stringify({ type, payload }));
        }
    }
}

// Global application state
class QuantumObserverApp {
constructor() {
        this.securityLevel = 0;
        this.activeObservers = 0;
        this.systemStatus = 'operational';
        this.metrics = {
            quantumIntegrity: 89,
            observerNetwork: 66,
            realityCoherence: 94
        };
    }
    // Initialize the application
    init() {
        this.ws = new QuantumWebSocket('wss://api.quantum-observer.net/ws');
        this.ws.connect();
        
        this.setupWebSocketListeners();
        this.setupEventListeners();
        this.startMetricsUpdate();
        this.initializeQuantumSimulation();
    }

    // Setup WebSocket event listeners
    setupWebSocketListeners() {
        this.ws.addEventListener('metricsUpdate', (data) => {
            this.metrics = data;
            this.dispatchMetricsUpdate();
        });

        this.ws.addEventListener('anomalyDetected', (anomaly) => {
            this.handleAnomaly(anomaly);
        });

        this.ws.addEventListener('observerStatus', (observers) => {
            this.updateObserverStatus(observers);
        });
    }

    // Handle real-time anomalies
    handleAnomaly(anomaly) {
        const event = new CustomEvent('quantumAnomaly', {
            detail: anomaly
        });
        document.dispatchEvent(event);

        // Visual feedback
        if (anomaly.severity === 'critical') {
            document.body.classList.add('anomaly-critical');
            setTimeout(() => {
                document.body.classList.remove('anomaly-critical');
            }, 1000);
        }
    }

    // Update observer status
    updateObserverStatus(observers) {
        this.activeObservers = observers.filter(o => o.status === 'active').length;
        const event = new CustomEvent('observersUpdate', {
            detail: observers
        });
        document.dispatchEvent(event);
    }
// Set up global event listeners
    setupEventListeners() {
        // Mobile menu toggle
        document.addEventListener('click', (e) => {
            if (e.target.closest('[data-menu-toggle]')) {
                this.toggleMobileMenu();
            }
        });

        // Security status updates
        this.setupSecurityMonitoring();
    }

    // Simulate real-time metrics updates
    startMetricsUpdate() {
        setInterval(() => {
            this.updateMetrics();
            this.dispatchMetricsUpdate();
        }, 2000);
    }

    // Update security metrics with realistic fluctuations
    updateMetrics() {
        this.metrics.quantumIntegrity = Math.max(85, Math.min(95, 
            this.metrics.quantumIntegrity + (Math.random() - 0.5) * 2
        ));

        this.metrics.observerNetwork = Math.max(60, Math.min(75,
            this.metrics.observerNetwork + (Math.random() - 0.5) * 3
        ));

        this.metrics.realityCoherence = Math.max(90, Math.min(98,
            this.metrics.realityCoherence + (Math.random() - 0.5) * 1.5
        ));
    }

    // Dispatch custom event for metrics updates
    dispatchMetricsUpdate() {
        const event = new CustomEvent('metricsUpdate', {
            detail: { metrics: this.metrics }
        });
        document.dispatchEvent(event);
    }

    // Toggle mobile menu
    toggleMobileMenu() {
        const menu = document.querySelector('[data-mobile-menu]');
        if (menu) {
            menu.classList.toggle('hidden');
            menu.classList.toggle('flex');
        }
    }

    // Initialize quantum simulation visualization
    initializeQuantumSimulation() {
        // This would integrate with actual quantum computing APIs
        console.log('Quantum simulation initialized');
    }

    // Security monitoring setup
    setupSecurityMonitoring() {
        // Monitor for security events
        document.addEventListener('securityAlert', (e) => {
            this.handleSecurityAlert(e.detail);
        });
    }

    // Handle security alerts
    handleSecurityAlert(alert) {
        console.log('Security alert received:', alert);
        
        // Update security level based on alert severity
        if (alert.severity === 'high') {
            this.securityLevel = Math.min(100, this.securityLevel + 10);
            this.triggerEmergencyProtocol(alert);
        }
    }

    // Emergency protocol trigger
    triggerEmergencyProtocol(alert) {
        // Implement emergency response protocols
        const protocol = {
            phase1: ['isolate_nodes', 'quantum_scrambling'],
            phase2: ['reroute_streams', 'regenerate_keys'],
            phase3: ['forensic_analysis', 'system_hardening']
        };

        console.log('Emergency protocol activated:', protocol);
    }
}

// Initialize the application when DOM is loaded
document.addEventListener('DOMContentLoaded', () => {
    const app = new QuantumObserverApp();
    app.init();
});

// API integration for quantum metrics
class QuantumMetricsAPI {
    constructor() {
        this.baseURL = 'https://api.quantum-observer.net/v1';
    }

    async getSystemStatus() {
        try {
            const response = await fetch(`${this.baseURL}/status`);
            return await response.json();
        } catch (error) {
            console.error('Failed to fetch system status:', error);
            return { status: 'unknown', metrics: {} };
        }
    }

    async getObserverNetwork() {
        try {
            const response = await fetch(`${this.baseURL}/observers`);
            return await response.json();
        } catch (error) {
            console.error('Failed to fetch observer network:', error);
            return { observers: [], active: 0 };
        }
    }
}

// Utility functions
const Utils = {
    // Format percentage values
    formatPercentage: (value) => {
        return `${Math.round(value)}%`;
    },

    // Generate random security events for demo
    generateSecurityEvent: () => {
        const events = [
            { type: 'photon_anomaly', severity: 'low' },
            { type: 'observer_timeout', severity: 'medium' },
            { type: 'quantum_breach', severity: 'high' }
        ];

        return events[Math.floor(Math.random() * events.length)];
    },

    // Debounce function for performance
    debounce: (func, wait) => {
        let timeout;
        return function executedFunction(...args) {
            const later = () => {
                clearTimeout(timeout);
                func(...args);
            };
            clearTimeout(timeout);
            timeout = setTimeout(later, wait);
        };
    }
};