<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CFX Server Info</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        }

        body {
            background-color: #000;
            color: #fff;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 40px 20px;
        }

        .network-strings {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
            z-index: -1;
        }

        .network-strings span {
            position: absolute;
            background: rgba(255, 255, 255, 0.1);
            width: 2px;
            height: 100%;
            animation: moveStrings 5s linear infinite;
            opacity: 0.5;
        }

        /* Animation for moving strings */
        @keyframes moveStrings {
            0% {
                transform: translateY(0);
            }
            100% {
                transform: translateY(-100%);
            }
        }

        .container {
            width: 100%;
            max-width: 800px;
        }

        h1 {
            font-size: 28px;
            margin-bottom: 30px;
            text-align: center;
            font-weight: 500;
        }

        .button-group {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-bottom: 30px;
            flex-wrap: wrap;
        }

        .json-button {
            background-color: #0f1623;
            border: none;
            color: #fff;
            padding: 10px 20px;
            border-radius: 4px;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 8px;
            text-decoration: none;
        }

        .json-button:hover {
            background-color: #1a2333;
        }

        .section {
            margin-bottom: 30px;
        }

        .section-title {
            font-size: 20px;
            margin-bottom: 15px;
            text-align: center;
        }

        .tags {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 10px;
        }

        .tag {
            background-color: #0f1623;
            padding: 5px 15px;
            border-radius: 4px;
            font-size: 14px;
        }

        .info-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 20px;
        }

        .info-item {
            background-color: #0f1623;
            padding: 15px;
            border-radius: 4px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
        }

        .raw-data {
            background-color: #0f1623;
            padding: 20px;
            border-radius: 4px;
            white-space: pre-wrap;
            font-family: monospace;
            margin-bottom: 20px;
            overflow-x: auto;
            max-height: 400px;
            overflow-y: auto;
        }

        .back-button {
            width: 100%;
            padding: 15px;
            background-color: #1a1a1a;
            border: none;
            color: #fff;
            border-radius: 4px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
        }

        .back-button:hover {
            background-color: #2a2a2a;
        }

        #serverInfo {
            display: none;
        }

        .input-container {
            width: 100%;
            max-width: 500px;
            margin: 0 auto;
        }

        .input-container input {
            width: 100%;
            padding: 12px 16px;
            background-color: #1a1a1a;
            border: 1px solid #333;
            color: #fff;
            border-radius: 4px;
            font-size: 16px;
            margin-bottom: 15px;
        }

        canvas {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
        }

        #inputForm {
            margin: 20px;
            text-align: center;
        }

        #serverInfo {
            display: none;
            margin: 20px;
            text-align: center;
        }

        .tag {
            background: #444;
            color: #fff;
            padding: 5px 10px;
            margin: 2px;
            border-radius: 3px;
            display: inline-block;
        }

        #loading {
            display: none;
            text-align: center;
        }

        #error {
            color: red;
            display: none;
        }

        .input-container button {
            width: 100%;
            padding: 12px;
            background-color: #1a1a1a;
            border: none;
            color: #fff;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
        }

        .loading {
            text-align: center;
            margin: 20px 0;
            display: none;
        }

        .error {
            color: #ff4444;
            text-align: center;
            margin: 10px 0;
            display: none;
        }
    </style>
</head>
<body>
    <div class="input-container" id="inputForm">
        <h1>Please enter a valid CFX address</h1>
        <input type="text" id="cfxAddress" placeholder="cfx.re/join/xxxxxx" autocomplete="off">
        <button onclick="checkAddress()">Submit</button>
        <div id="error" class="error"></div>
    </div>

    <div id="loading" class="loading">Loading server info...</div>

    <div class="container" id="serverInfo">
        <h1 id="serverName"></h1>
        
        <div class="button-group">
            <a class="json-button" id="playersJson" target="_blank">
                <span>🔗</span>
                View players.json
            </a>
            <a class="json-button" id="infoJson" target="_blank">
                <span>🔗</span>
                View info.json
            </a>
            <a class="json-button" id="dynamicJson" target="_blank">
                <span>🔗</span>
                View dynamic.json
            </a>
        </div>

        <div class="section">
            <h2 class="section-title">Tags</h2>
            <div class="tags" id="serverTags"></div>
        </div>

        <div class="section">
            <h2 class="section-title">Endpoint</h2>
            <div class="info-grid">
                <div class="info-item">
                    <span>🌐</span>
                    <span id="serverIp"></span>
                </div>
                <div class="info-item">
                    <span>🔌</span>
                    <span id="serverPort"></span>
                </div>
            </div>
        </div>

        <div class="section">
            <h2 class="section-title">Stats</h2>
            <div class="info-grid">
                <div class="info-item">
                    <span>👥</span>
                    <span id="playerCount"></span>
                </div>
                <div class="info-item">
                    <span>📊</span>
                    <span id="serverStats"></span>
                </div>
            </div>
        </div>

        <div class="section">
            <h2 class="section-title">Raw Data</h2>
            <div class="raw-data" id="rawData"></div>
        </div>

        <button class="back-button" onclick="goBack()">
            <span>↩</span>
            Back
        </button>
    </div>

    <script>
        async function fetchServerInfo(cfxId) {
            const serverId = cfxId.split('/').pop();
            
            try {
                const response = await fetch(`https://servers-frontend.fivem.net/api/servers/single/${serverId}`);
                if (!response.ok) throw new Error('Server not found');
                const data = await response.json();
                
                return data;
            } catch (error) {
                throw new Error('Failed to fetch server information');
            }
        }

        async function checkAddress() {
            const input = document.getElementById('cfxAddress');
            const error = document.getElementById('error');
            const loading = document.getElementById('loading');
            const address = input.value.trim();

            error.style.display = 'none';
            
            if (!address || !address.startsWith('cfx.re/join/')) {
                error.textContent = 'Please enter a valid CFX address';
                error.style.display = 'block';
                return;
            }

            document.getElementById('inputForm').style.display = 'none';
            loading.style.display = 'block';

            try {
                const serverData = await fetchServerInfo(address);
                displayServerInfo(serverData, address);
            } catch (err) {
                error.textContent = err.message;
                error.style.display = 'block';
                document.getElementById('inputForm').style.display = 'block';
            } finally {
                loading.style.display = 'none';
            }
        }

            
            const networkContainer = document.createElement('div');
            networkContainer.className = 'network-strings';
            document.body.appendChild(networkContainer);

            
            for (let i = 0; i < 50; i++) {
                const stringElement = document.createElement('span');
                stringElement.style.left = `${Math.random() * 100}%`;
                stringElement.style.animationDuration = `${3 + Math.random() * 5}s`;
                stringElement.style.animationDelay = `${Math.random() * 2}s`;
                networkContainer.appendChild(stringElement);
            }


        function displayServerInfo(data, address) {
            const serverData = data.Data;

            // Set server name
            document.getElementById('serverName').textContent = serverData.hostname || 'Unknown Server';

            // Set JSON view links
            const baseUrl = `https://servers-frontend.fivem.net/api/servers/single/${data.EndPoint}`;
            document.getElementById('playersJson').href = `${baseUrl}/players.json`;
            document.getElementById('infoJson').href = `${baseUrl}/info.json`;
            document.getElementById('dynamicJson').href = `${baseUrl}/dynamic.json`;

            // Set tags
            const tagsContainer = document.getElementById('serverTags');
            tagsContainer.innerHTML = '';
            if (serverData.vars && serverData.vars.tags) {
                serverData.vars.tags.split(',').forEach(tag => {
                    const tagElement = document.createElement('span');
                    tagElement.className = 'tag';
                    tagElement.textContent = tag.trim();
                    tagsContainer.appendChild(tagElement);
                });
            }

            // Set endpoint info
            const endpoint = serverData.connectEndPoints?.[0]?.split(':') || [];
            document.getElementById('serverIp').textContent = endpoint[0] || 'Unknown';
            document.getElementById('serverPort').textContent = endpoint[1] || 'Unknown';

            // Set stats
            document.getElementById('playerCount').textContent = `${serverData.clients || 0}/${serverData.sv_maxclients || 0}`;
            document.getElementById('serverStats').textContent = serverData.upvotePower || 0;

            // Set raw data
            document.getElementById('rawData').textContent = JSON.stringify(data, null, 2);

            // Show server info
            document.getElementById('serverInfo').style.display = 'block';
        }

        function goBack() {
            document.getElementById('inputForm').style.display = 'block';
            document.getElementById('serverInfo').style.display = 'none';
            document.getElementById('cfxAddress').value = '';
            document.getElementById('error').style.display = 'none';
        }

        // Add enter key support
        document.getElementById('cfxAddress').addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                checkAddress();
            }
        });


          // Dein bestehender Code bleibt unverändert...

        // Netzwerk-Strings Canvas
        const canvas = document.getElementById('networkCanvas');
        const ctx = canvas.getContext('2d');

        // Canvas Größe dynamisch einstellen
        function resizeCanvas() {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
        }
        resizeCanvas();
        window.addEventListener('resize', resizeCanvas);

        // Node-Array für Fäden erstellen
        const nodes = [];
        const nodeCount = 100;

        class Node {
            constructor() {
                this.x = Math.random() * canvas.width;
                this.y = Math.random() * canvas.height;
                this.vx = (Math.random() - 0.5) * 0.5;
                this.vy = (Math.random() - 0.5) * 0.5;
            }

            update() {
                this.x += this.vx;
                this.y += this.vy;

                if (this.x < 0 || this.x > canvas.width) this.vx *= -1;
                if (this.y < 0 || this.y > canvas.height) this.vy *= -1;
            }

            draw() {
                ctx.beginPath();
                ctx.arc(this.x, this.y, 2, 0, Math.PI * 2);
                ctx.fillStyle = 'rgba(255, 255, 255, 0.8)';
                ctx.fill();
            }
        }

        for (let i = 0; i < nodeCount; i++) {
            nodes.push(new Node());
        }
        
        function drawConnections() {
            for (let i = 0; i < nodes.length; i++) {
                for (let j = i + 1; j < nodes.length; j++) {
                    const dx = nodes[i].x - nodes[j].x;
                    const dy = nodes[i].y - nodes[j].y;
                    const distance = Math.sqrt(dx * dx + dy * dy);

                    if (distance < 150) {
                        const opacity = 1 - distance / 150;
                        ctx.beginPath();
                        ctx.moveTo(nodes[i].x, nodes[i].y);
                        ctx.lineTo(nodes[j].x, nodes[j].y);
                        ctx.strokeStyle = `rgba(255, 255, 255, ${opacity})`;
                        ctx.lineWidth = 0.8;
                        ctx.stroke();
                    }
                }
            }
        }

        function animate() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);

            nodes.forEach((node) => {
                node.update();
                node.draw();
            });

            drawConnections();
            requestAnimationFrame(animate);
        }

        animate();

    // Blockiere F12 und andere Entwicklertools-Tastenkombinationen
    document.addEventListener('keydown', function (e) {
        if (
            e.key === 'F12' || // F12
            (e.ctrlKey && e.shiftKey && (e.key === 'I' || e.key === 'C' || e.key === 'J')) || // Ctrl+Shift+I, Ctrl+Shift+C, Ctrl+Shift+J
            (e.ctrlKey && e.key === 'U') // Ctrl+U
        ) {
            // Weiterleitung zu YouTube Rickroll
            window.location.href = 'https://www.youtube.com/watch?v=dQw4w9WgXcQ';
            e.preventDefault(); // Verhindert die Aktion
        }
    });

    // Blockiere Rechtsklick (Kontextmenü)
    document.addEventListener('contextmenu', function (e) {
        // Weiterleitung zu YouTube Rickroll
        window.location.href = 'https://www.youtube.com/watch?v=dQw4w9WgXcQ';
        e.preventDefault(); // Verhindert das Kontextmenü
    });

    // Erschwert das Debugging durch "DevTools" (Konsole)
    setInterval(function () {
        const before = new Date();
        debugger; // Erzeugt ein Debugging-Event
        const after = new Date();
        if (after - before > 100) {
            // Wenn Entwicklertools aktiv, leite um
            window.location.href = 'https://www.youtube.com/watch?v=dQw4w9WgXcQ';
        }
    }, 1000);

    </script>
</body>
</html>