<!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 */
            color: white; /* Set text color to white for contrast */
            height: 100%;
        }

        /* Header Style (NMAP-like) */
        header {
            background-color: #000000; /* Change background to black */
            padding: 10px 0;
            text-align: left;
            font-family: 'Courier New', monospace;
            font-size: 24px;
            color: #00ff00; /* NMAP Green */
            position: fixed; /* Make the header sticky */
            top: 0;
            left: 10px;
            z-index: 1000; /* Ensure it's always on top */
            white-space: nowrap;
            display: flex;
            align-items: center; /* Center text vertically */
        }

        /* Flashing Cursor Effect */
        #cursor {
            display: inline-block;
            width: 10px;
            height: 24px;
            background-color: #00ff00; /* NMAP Green cursor */
            animation: blink 1s step-end infinite;
        }

        @keyframes blink {
            50% {
                opacity: 0;
            }
        }

        /* Scrolling Report Style */
        #scrolling-report {
            color: #00f; /* Blue text for the report */
            font-family: 'Courier New', monospace;
            font-size: 18px;
            margin-left: 20px;
            white-space: nowrap;
            overflow: hidden;
            flex: 1;
        }

        #scrolling-report span {
            display: inline-block;
            padding-left: 100%;
            animation: scroll-text 15s linear infinite; /* Adjust scrolling speed here */
        }

        @keyframes scroll-text {
            0% {
                transform: translateX(0);
            }
            100% {
                transform: translateX(-100%);
            }
        }

        /* Map Section */
        #map {
            height: 70vh; /* Ensure map fills the screen vertically */
            width: 100%;
            background-color: #000000; /* Ensure map container is jet black */
            margin-top: 50px; /* To prevent the map from overlapping the header */
        }

        /* Live Feed Section (Below the map) */
        #live-feed {
            background: #000;
            color: #0f0;
            font-family: monospace;
            padding: 20px;
            max-height: 30vh;
            overflow-y: auto;
            margin: 0 auto;
            width: 95%;
            border: 2px solid #f00; /* Red border around feed box */
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(255, 0, 0, 0.5);
            text-align: center; /* Center the live feed container */
        }

        /* Feed Item Styling */
        .feed-item {
            border-bottom: 1px solid #444;
            padding: 5px 0;
            text-align: left; /* Align text inside the feed item to the left */
        }

        /* Popup Box Styling (Information box on the map) */
        .leaflet-popup-content-wrapper {
            background: transparent !important; /* Remove background */
            border: none !important; /* Remove border */
        }

        .leaflet-popup-tip {
            background: transparent !important; /* Make pointer transparent */
        }

        .popup-box {
            color: #0f0;
            background-color: #000; /* Black background for the popup */
            padding: 10px;
            border-radius: 5px;
            border: none; /* Remove the white border */
            box-shadow: none; /* Remove the box shadow */
            position: relative;
            max-width: 300px; /* Optional: Set a maximum width for the popup */
        }

        .origin { color: #ff0; }
        .target { color: #0ff; }
        .type { color: #f00; }
        .ip { color: #f0f; }
        .intel { color: #0f0; }

        /* Hide the attribution control */
        .leaflet-control-attribution {
            display: none;
        }

        /* Warning triangle icon styling */
        .warning-icon {
            width: 32px;
            height: 32px;
            background-color: red;
            clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
            position: relative;
        }

        .warning-icon::before {
            content: '!';
            color: yellow;
            font-size: 22px;
            position: absolute;
            top: 3px;
            left: 50%;
            transform: translateX(-50%);
        }

        .warning-icon::after {
            content: '01001010 00110011'; /* Random binary pattern as computer code */
            color: white;
            font-size: 10px;
            position: absolute;
            bottom: 5px;
            left: 50%;
            transform: translateX(-50%);
        }
    </style>
</head>
<body>
    <!-- Header Section -->
    <header>
        <span id="typed-text"></span><span id="cursor">_</span>
        <!-- Scrolling report section -->
        <div id="scrolling-report">
            <span id="report-text"></span>
        </div>
    </header>

    <!-- Map Section -->
    <div id="map"></div>

    <!-- Live Feed Section (Below the map) -->
    <div id="live-feed"></div>

    <!-- Include Leaflet.js and Socket.io -->
    <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 new attack data
        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.'
            ];

            let latitude, longitude;

            // Generate random coordinates within land
            latitude = (Math.random() * 180 - 90); // Random latitude between -90 and 90
            longitude = (Math.random() * 360 - 180); // Random longitude between -180 and 180

            const attack = {
                latitude: latitude,
                longitude: longitude,
                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 with warning triangle
            const icon = L.divIcon({
                className: 'warning-icon',
                iconSize: [32, 32],
                iconAnchor: [16, 32],
                popupAnchor: [0, -32]
            });

            const marker = L.marker([attack.latitude, attack.longitude], { icon: icon }).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 attacks every 5 seconds
        setInterval(simulateAttack, 5000);

        // Typing effect for the header
        const textToType = "Cyberwars.AI";
        let i = 0;
        const typedTextElement = document.getElementById("typed-text");
        const cursorElement = document.getElementById("cursor");

        function typeText() {
            if (i < textToType.length) {
                typedTextElement.innerHTML += textToType.charAt(i);
                i++;
                setTimeout(typeText, 150); // Adjust typing speed by changing the timeout value
            }
        }

        // Start the typing effect when the page loads
        window.onload = typeText;

        // Scrolling text report (simulated updates)
        let report = "New cyberattacks are emerging every second. Stay vigilant, the digital battlefield is real!";
        document.getElementById("report-text").innerText = report;
    </script>
</body>
</html>
