<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
    <title>Invite MEAOW's#9537 Bot</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;
        }
        .rounded-button {
            border-radius: 9999px;
            transition: transform 0.2s ease-in-out;
        }
        .rounded-button:hover {
            transform: scale(1.05);
        }
        .nav-toggle {
            display: none;
        }
        .overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.8);
            z-index: 10;
            justify-content: flex-start;
            align-items: center;
            flex-direction: column;
            padding-top: 50px;
        }
        .overlay.active {
            display: flex;
        }
        .overlay a {
            display: block;
            padding: 20px;
            font-size: 1.5rem;
            color: white;
            text-align: center;
            width: 100%;
            border-bottom: 1px solid #333;
        }
        @media (max-width: 768px) {
            .nav-toggle {
                display: block;
            }
            .nav-menu {
                display: none;
            }
        }
        @media (min-width: 769px) {
            .main-content {
                margin-top: 30px;
            }
        }
        footer {
            margin-top: auto;
            background: none;
            padding: 1rem 0;
        }
        #messagePopup {
            z-index: 1000;
        }
        textarea {
            color: black; 
        }
        #successAlert {
            z-index: 2000;
        }
    </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">Shanti#3370</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 main-content">
        <img alt="Meaow logo with musical notes" class="mx-auto mb-4 rounded-full" height="150" src="./assest/Shantiprofile.gif" width="150"/>
        <h1 class="text-3xl font-bold mb-2">Shanti</h1>
        <p class="text-lg mb-4">บอทเล่นเพลงที่ถูกพัฒนามาเพื่อให้ใช้งานง่าย</p>
        <div class="flex flex-col md:flex-row justify-center space-y-4 md:space-y-0 md:space-x-4">
            <a class="bg-gray-700 hover:bg-gray-600 text-white py-2 px-4 rounded-button flex items-center justify-center" href="https://discord.com/oauth2/authorize?client_id=1249032446012424315&permissions=8&integration_type=0&scope=bot+applications.commands" target="_blank">
                <i class="fas fa-plus mr-2"></i> เพิ่มบอท
            </a>
            <!-- <button id="openPopup" class="bg-gray-700 hover:bg-gray-600 text-white py-2 px-4 rounded-button flex items-center justify-center">
                ส่งข้อความถึงผู้พัฒนา
            </button> -->
        </div>
    
        <div id="messagePopup" class="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 hidden">
            <div class="bg-white p-6 rounded shadow-lg w-80">
                <h2 class="text-center text-black mb-4">ส่งข้อความถึงผู้พัฒนา</h2>
                <textarea id="message" rows="4" placeholder="พิมพ์ข้อความของคุณที่นี่..." class="w-full p-2 border border-gray-600 rounded text-black"></textarea>
                <div class="flex justify-between mt-4">
                    <button id="sendMessage" class="bg-green-600 hover:bg-green-500 text-white py-1 px-2 rounded">ส่งข้อความ</button>
                    <button id="closePopup" class="bg-red-600 hover:bg-red-500 text-white py-1 px-2 rounded">ปิด</button>
                </div>
            </div>
        </div>
        <div id="successAlert" class="fixed top-4 right-4 bg-green-500 text-white p-4 rounded hidden">
            ข้อความของคุณถูกส่งแล้ว!
        </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>
            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>