<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cyberwars.ai</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css">
    <style>
        body {
            margin: 0;
            font-family: Arial, sans-serif;
            background-color: #000000; /* Jet black background */
            height: 100%;
            color: white; /* Set text color to white for contrast */
            display: flex;
            flex-direction: column; /* Stack elements vertically */
        }
        #map {
            height: 70vh; /* Map takes up 70% of the screen */
            width: 100%;
            background-color: #000000; /* Ensure map container is jet black */
        }
        #live-feed {
            flex: 1; /* Allow feed to take up remaining space */
            overflow-y: auto;
            background: #000;
            color: #0f0;
            font-family: monospace;
            padding: 10px;
            height: 30vh; /* Limit feed height */
        }
        .feed-item {
            border: 2px solid #0f0; /* Green border */
            background-color: #000; /* Black background */
            color: #0f0; /* Green text */
            padding: 10px;
            margin: 5px 0;
            font-size: 14px;
            border-radius: 5px; /* Rounded corners */
        }
        .feed-item .origin {
            color: #ff0; /* Yellow color for origin */
        }
        .feed-item .target {
            color: #f00; /* Red color for target */
        }
        .feed-item .type {
            color: #00f; /* Blue color for attack type */
        }
        .leaflet-control-attribution {
            display: none;
        }
        .popup-box {
            background-color: #000; /* Black background */
            color: #0f0; /* Green text */
            border: 2px solid #0f0; /* Green border */
            padding: 10px;
            font-size: 14px;
            border-radius: 5px;
        }
        .popup-box .origin {
            color: #ff0; /* Yellow color for origin */
        }
        .popup-box .target {
            color: #f00; /* Red color for target */
        }
        .popup-box .ip {
            color: #00f; /* Blue color for IP */
        }
        .popup-box .intel {
            color: #fff; /* White for intel */
        }

        /* Custom styling for the Leaflet pop-up */
        .leaflet-popup-content-wrapper {
            background: #000; /* Black background */
            border: 2px solid #0f0 !important; /* Green border */
            border-radius: 5px; /* Rounded corners */
        }

        .leaflet-popup-content {
            color: #0f0; /* Green text */
            font-size: 14px;
        }

        /* Remove default white background of pop-up arrow */
        .leaflet-popup-tip {
            background: #000 !important;
            border-color: #0f0 !important;
        }

        @media (max-width: 768px) {
            #map {
                height: 50vh; /* On smaller screens, reduce map size */
            }
            #live-feed {
                height: 50vh; /* Allow the feed to take up the remaining space */
            }
        }
    </style>
</head>
<body>
    <div id="map"></div>
    <div id="live-feed"></div>

    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.6.1/socket.io.min.js"></script>
    <script>
        // Initialize the map
        const map = L.map('map', {
            maxBounds: [[-90, -180], [90, 180]], // Restrict panning to the world bounds
            maxBoundsViscosity: 1.0, // Prevent map from moving beyond bounds
            worldCopyJump: false
        }).setView([20, 0], 2); // Centered at the equator

        L.tileLayer('https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png', {
            attribution: '',
            subdomains: 'abcd',
            maxZoom: 19,
            noWrap: true // Disable world wrapping to prevent multiple maps
        }).addTo(map);

        // Simulate real-time attack data with more diversity
        function simulateAttack() {
            const attackTypes = ['DDoS', 'Phishing', 'Malware', 'Ransomware', 'SQL Injection'];
            const origins = ['Hacker Group A', 'Anonymous', 'Cybercriminal X', 'LulzSec', 'APT34'];
            const targets = ['Target Network X', 'Government Server Y', 'Financial Institution Z', 'Critical Infrastructure A'];
            const ips = ['192.168.1.1', '10.0.0.5', '172.16.0.8', '193.1.1.3'];
            const intels = [
                'Attacker located in Eastern Europe, known for ransomware attacks.',
                'Phishing attack targeting government employees, using fake emails.',
                'Malware spreading through unpatched systems in the healthcare sector.',
                'Ransomware demanding 10 BTC for file decryption.'
            ];

            const attack = {
                latitude: (Math.random() * 180 - 90), // Random latitude between -90 and 90
                longitude: (Math.random() * 360 - 180), // Random longitude between -180 and 180
                origin: origins[Math.floor(Math.random() * origins.length)],
                target: targets[Math.floor(Math.random() * targets.length)],
                type: attackTypes[Math.floor(Math.random() * attackTypes.length)],
                ip: ips[Math.floor(Math.random() * ips.length)],
                intel: intels[Math.floor(Math.random() * intels.length)],
                timestamp: new Date().toLocaleString()
            };

            // Add attack marker to the map
            const marker = L.circleMarker([attack.latitude, attack.longitude], {
                color: 'red',
                radius: 8,
            }).addTo(map);

            // Pop-up with color-coded information
            marker.bindPopup(`
                <div class="popup-box">
                    <strong>Time:</strong> ${attack.timestamp}<br>
                    <strong>Origin:</strong> <span class="origin">${attack.origin}</span><br>
                    <strong>Target:</strong> <span class="target">${attack.target}</span><br>
                    <strong>Type:</strong> <span class="type">${attack.type}</span><br>
                    <strong>IP Address:</strong> <span class="ip">${attack.ip}</span><br>
                    <strong>Intel:</strong> <span class="intel">${attack.intel}</span>
                </div>
            `).openPopup();

            // Add attack details to live feed
            const feedItem = document.createElement('div');
            feedItem.classList.add('feed-item');
            feedItem.innerHTML = `
                <strong>Time:</strong> ${attack.timestamp} | 
                <strong>Origin:</strong> <span class="origin">${attack.origin}</span> | 
                <strong>Target:</strong> <span class="target">${attack.target}</span> | 
                <strong>Type:</strong> <span class="type">${attack.type}</span><br>
                <strong>IP:</strong> <span class="ip">${attack.ip}</span> | 
                <strong>Intel:</strong> <span class="intel">${attack.intel}</span>
            `;
            document.getElementById('live-feed').prepend(feedItem);
        }

        // Simulate new attack every 5 seconds
        setInterval(simulateAttack, 5000);
    </script>
</body>
</html>