<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>X SERVER & PLAYER INFO</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
</head>

<body class="bg-transparent">
    <div id="player-info" class="fixed bottom-1 left-1/2 transform -translate-x-1/2 bg-gray-800 text-white px-4 py-2 rounded-lg shadow-lg flex space-x-3 hidden">

        <div id="player-id-container" class="flex items-center space-x-2 bg-gray-700 px-2 py-1 rounded-lg hidden">
            <i class="fas fa-user text-blue-400"></i>
            <p class="text-xs font-semibold">ID: <span id="player-id"></span></p>
        </div>


        <div id="website-container" class="flex items-center space-x-2 bg-gray-700 px-2 py-1 rounded-lg hidden">
            <i class="fas fa-globe text-green-400"></i>
            <p class="text-xs font-semibold">Website: <a href="#" id="website-link" class="text-green-400"></a></p>
        </div>

        <div id="discord-container" class="flex items-center space-x-2 bg-gray-700 px-2 py-1 rounded-lg hidden">
            <i class="fab fa-discord text-purple-400"></i>
            <p class="text-xs font-semibold">Discord: <a href="#" id="discord-link" class="text-purple-400"></a></p>
        </div>
    </div>

    <script>
        window.addEventListener('message', function(event) {
            const data = event.data;
    
            if (data.action === 'showPlayerInfo') {
                let shouldDisplay = false;
    
                if (data.playerId) {
                    document.getElementById('player-id').textContent = data.playerId;
                    document.getElementById('player-id-container').classList.remove('hidden');
                    shouldDisplay = true;
                } else {
                    document.getElementById('player-id-container').classList.add('hidden');
                }
    
                if (data.website) {
                    document.getElementById('website-link').textContent = data.website;
                    document.getElementById('website-link').href = data.website;
                    document.getElementById('website-container').classList.remove('hidden');
                    shouldDisplay = true;
                } else {
                    document.getElementById('website-container').classList.add('hidden');
                }
    
                if (data.discord) {
                    document.getElementById('discord-link').textContent = data.discord;
                    document.getElementById('discord-link').href = data.discord;
                    document.getElementById('discord-container').classList.remove('hidden');
                    shouldDisplay = true;
                } else {
                    document.getElementById('discord-container').classList.add('hidden');
                }
    
                if (shouldDisplay) {
                    document.getElementById('player-info').classList.remove('hidden');
                } else {
                    document.getElementById('player-info').classList.add('hidden');
                }
            } else if (data.action === 'hidePlayerInfo') {
                document.getElementById('player-info').classList.add('hidden');
            }
        });
    </script>
    
   
</body>
</html>
