<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
    <title>Developer - MEAOW's#9537</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> 
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet"/>
    <link href="https://fonts.googleapis.com/css2?family=Kanit:wght@400;700&display=swap" rel="stylesheet"/>
    <link href="https://cdn.discordapp.com/avatars/1109184006412578828/a_209de01ae7d823f5da30bda63423a26a.png" rel="icon" type="image/x-icon"/>
    <style>
        body {
            font-family: 'Kanit', sans-serif;
            background-color: #1a1a2e;
            color: #ffffff;
            display: flex;
            flex-direction: column;
            min-height: 100vh;
            justify-content: center; 
        }
        footer {
            margin-top: auto;
            background: none;
            padding: 1rem 0;
        }
    </style>
</head>
<body class="bg-gray-900 text-white">
    <header class="bg-gray-800 py-4">
        <div class="container mx-auto flex justify-between items-center px-4">
            <div class="text-lg font-bold">MEAOW's#9537</div>
            <nav class="space-x-4">
                <a class="hover:text-gray-400" href="./index.html">
                    <i class="fas fa-home"></i> Home
                </a>
            </nav>
        </div>
    </header>
    
    <main class="container mx-auto text-center py-8 px-4">
        <h1 class="text-3xl font-bold mb-8">Developer</h1>
        <div class="flex flex-col md:flex-row justify-center space-y-8 md:space-x-10 md:space-y-0">
            <div class="bg-gray-800 rounded-lg shadow-lg p-4 max-w-sm relative">
                <img alt="Developer" class="rounded-lg mb-4 w-3/4 mx-auto" id="developerAvatar"/> 
                <p class="text-sm text-gray-400" id="developer">กำลังดึงข้อมูล</p>
                <div class="bg-gray-700 rounded p-2 mt-4 text-sm text-gray-300">
                    <span id="position"></span>
                </div>
                <div id="activity" class="text-sm mt-2"></div>
                <div id="status" class="py-1 px-2 text-white rounded-full mt-4 inline-block text-sm"></div>
            </div>

            <div class="bg-gray-800 rounded-lg shadow-lg p-4 max-w-sm relative">
                <img alt="Developer 2" class="rounded-lg mb-4 w-3/4 mx-auto" src="./assest/Žedear.jpg"/> 
                <p class="text-sm text-gray-400">Žedear</p>
                <div class="bg-gray-700 rounded p-2 mt-4 text-sm text-gray-300">
                    <span>VoiceMaster</span>
                </div>
                <div class="py-1 px-2 text-white rounded-full mt-4 inline-block text-sm bg-gray-500">
                    Unknown Status
                </div>
            </div>
        </div>
    </main>
    
    
    <footer class="py-4">
        <div class="container mx-auto text-center">
            <p class="text-gray-400 text-sm">
                &copy; 2024 MEAOW's#9537-Žedear. All rights reserved.
            </p>
        </div>
    </footer>

    <script>
        $.ajax({
            url: "https://api.lanyard.rest/v1/users/881901702767313017",
            type: "GET",
            success: function(data) {
                const status = data.data.discord_status;
                const userName = data.data.discord_user.username;
                const avatar = data.data.discord_user.avatar;
                const userId = data.data.discord_user.id;
    
                const avatarUrl = `https://cdn.discordapp.com/avatars/${userId}/${avatar}.png`;
    
                $("#developerAvatar").attr("src", avatarUrl); 
                $("#developer").text(`${userName}`);  
                $("#position").text("CEO-Founder & Developer");
    
                switch (status) {
                    case "online":
                        $("#status").css("background-color", "#43b581").text("ออนไลน์").show();
                        break;
                    case "idle":
                        $("#status").css("background-color", "#faa61a").text("ไม่อยู่").show();
                        break;
                    case "dnd":
                        $("#status").css("background-color", "#e83e39").text("ห้ามรบกวน").show();
                        break;
                    case "offline":
                        $("#status").css("background-color", "#747f8d").text("ออฟไลน์").show();
                        break;
                    default:
                        $("#status").css("background-color", "#747f8d").text("Unknown Status").show();
                }
            },
            error: function() {
                $("#status").addClass("bg-red-600").text("Error fetching status").show();
            }
        });
        document.addEventListener('keydown', function(event) {
        if (event.ctrlKey && event.shiftKey && event.code === 'KeyI') {
            alert('อย่าทำเเบบนี้สิ! มันไม่ดีเลยนะงับ 🖕');
            event.preventDefault();
        }
    });
        document.addEventListener('contextmenu', function(event) {
            alert('อย่าทำเเบบนี้สิ! มันไม่ดีเลยนะงับ 🖕');
            event.preventDefault(); 
        });

        document.addEventListener('keydown', function(event) {
            if (event.ctrlKey && (event.code === 'KeyS' || event.code === 'KeyC' || event.code === 'KeyJ')) {
                alert('อย่าทำเเบบนี้สิ! มันไม่ดีเลยนะงับ 🖕');
                event.preventDefault();
            }
        });

        document.addEventListener('keydown', function(event) {
            if (event.code === 'F12') {
                alert('อย่าทำเเบบนี้สิ! มันไม่ดีเลยนะงับ 🖕');
                event.preventDefault();
            }
        });
    </script>
</body>
</html>