<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
    <title>MEAOW's#9537</title>
    <script src="https://cdn.tailwindcss.com"></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"/>
    <meta property="og:title" content="MEAOW's#9537"/>
    <meta property="og:description" content="เหมียวคือบอทเพลงบริการบนดิสคอร์ดที่รองรับสตรีมเล่นเพลงหลากหลายเเพลตฟอร์ม"/>
    <meta property="og:url" content="https://meaowmsbot.web.app"/>
    <meta property="og:image" content="https://cdn.discordapp.com/avatars/1109184006412578828/a_209de01ae7d823f5da30bda63423a26a.png"/>
    <meta property="og:type" content="website"/>
    <meta name="twitter:card" content="summary_large_image"/>
    <meta name="twitter:title" content="MEAOW's#9537"/>
    <meta name="twitter:description" content="เหมียวคือบอทเพลงบริการบนดิสคอร์ดที่รองรับสตรีมเล่นเพลงหลากหลายเเพลตฟอร์ม"/>
    <meta name="twitter:image" content="https://cdn.discordapp.com/avatars/1109184006412578828/a_209de01ae7d823f5da30bda63423a26a.png"/>
    <style>
        body {
            font-family: 'Kanit', sans-serif;
            background-color: #1a1a2e;
            color: #ffffff;
            display: flex;
            flex-direction: column;
            min-height: 100vh;
            margin: 0;
            padding: 0;
            overflow-x: hidden;
        }
        .rounded-button {
            border-radius: 9999px;
            padding: 10px 20px;
            background-color: #ff5722;
            color: white;
            border: none;
            cursor: pointer;
            transition: transform 0.2s ease-in-out, background-color 0.2s;
        }
        .rounded-button:hover {
            transform: scale(1.1);
            background-color: #ff784e;
        }
        .nav-toggle {
            display: none;
            background-color: transparent;
            border: none;
            color: white;
            font-size: 1.5rem;
            cursor: pointer;
        }
        .overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.9);
            z-index: 10;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            padding: 50px 20px;
        }
        .overlay.active {
            display: flex;
        }
        .overlay a {
            display: block;
            padding: 20px;
            font-size: 1.5rem;
            color: white;
            text-decoration: none;
            text-align: center;
            margin: 10px 0;
            transition: background-color 0.2s ease-in-out;
        }
        .overlay a:hover {
            background-color: rgba(255, 255, 255, 0.2);
            border-radius: 5px;
        }
        .nav-menu {
            display: flex;
            gap: 20px;
        }
        .nav-menu a {
            color: white;
            text-decoration: none;
            font-size: 1rem;
            transition: color 0.2s ease-in-out;
        }
        .nav-menu a:hover {
            color: #ff5722;
        }
        @media (max-width: 768px) {
            .nav-toggle {
                display: block;
            }
            .nav-menu {
                display: none;
            }
        }
        @media (min-width: 769px) {
            .main-content {
                margin: 50px auto;
                max-width: 900px;
                text-align: center;
            }
        }
        footer {
            margin-top: auto;
            background-color: #0f0f1e;
            padding: 1rem 0;
            text-align: center;
            font-size: 0.9rem;
            color: #bbb;
        }
        footer a {
            color: #ff5722;
            text-decoration: none;
        }
        footer a:hover {
            text-decoration: underline;
        }
        #messagePopup {
            z-index: 1000;
            background: rgba(0, 0, 0, 0.85);
            color: white;
            padding: 20px;
            border-radius: 10px;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            display: none;
            width: 90%;
            max-width: 400px;
            text-align: center;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5);
        }
        textarea {
            color: black;
            width: 100%;
            max-width: 100%;
            border: 1px solid #ddd;
            border-radius: 5px;
            padding: 10px;
            margin-top: 10px;
        }
        #successAlert {
            z-index: 2000;
            background-color: #4caf50;
            color: white;
            padding: 15px 20px;
            border-radius: 5px;
            position: fixed;
            top: 10px;
            right: 10px;
            display: none;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
        }
    </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>
        <div class="nav-toggle text-2xl cursor-pointer md:hidden" onclick="toggleMenu()">
            <i class="fas fa-bars"></i>
        </div>
        <nav class="nav-menu space-x-4 md:flex md:items-center">
            <a class="hover:text-gray-400" href="./index.html">
                <i class="fas fa-home"></i> Home
            </a>
            <a class="hover:text-gray-400" href="https://status.oreshi.com/report/uptime/e06db4d618df03d8f517f6a1f34d4605/" target="_blank">
                <i class="fas fa-server"></i> Status
            </a>
            <a class="hover:text-gray-400" href="developer.html">
                <i class="fas fa-user"></i> Developer
            </a>
            <a class="hover:text-gray-400" href="commands.html">
                <i class="fas fa-code"></i> Commands
            </a>
            <a class="hover:text-gray-400" href="anotherbot.html">
                <i class="fas fa-cubes"></i> Another Bot
            </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/7225-chipichipi-cat.gif" width="150"/>
    <h1 class="text-3xl font-bold mb-2">"เหมียว" นะงับ</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=1109184006412578828&permissions=8&integration_type=0&scope=bot+applications.commands" target="_blank">
            <i class="fas fa-plus mr-2"></i> เพิ่มบอท
        </a>
        <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.gg/Q4FZcTG68Y" target="_blank">
            <i class="fab fa-discord mr-2"></i> แจ้งปัญหา/ติดต่อผู้พัฒนา
        </a>
        <a class="bg-gray-700 hover:bg-gray-600 text-white py-2 px-4 rounded-button flex items-center justify-center" href="https://status.oreshi.com/report/uptime/e06db4d618df03d8f517f6a1f34d4605/" target="_blank">
            <i class="fas fa-cloud mr-2"></i> สถานะเซิร์ฟเวอร์
        </a>
    </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>
 <div class="overlay" id="overlay">
    <a class="hover:text-gray-400" href="https://status.oreshi.com/report/uptime/e06db4d618df03d8f517f6a1f34d4605/" target="_blank">
     <i class="fas fa-server"></i>
     Status
    </a>
    <a class="hover:text-gray-400" href="developer.html">
     <i class="fas fa-user"></i>
     Developer
    </a>
    <a class="hover:text-gray-400" href="commands.html">
     <i class="fas fa-code"></i>
     Commands
    </a>
    <a class="hover:text-gray-400" href="anotherbot.html">
        <i class="fas fa-cubes"></i>
        Another Bot
       </a>
    <a class="hover:text-gray-400" href="#" onclick="toggleMenu()">
     <i class="fas fa-times"></i>
     Close
    </a>
 </div>
  <script>
   function toggleMenu() {
        const overlay = document.getElementById('overlay');
        overlay.classList.toggle('active');
    }

    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();
        }
       });

       document.getElementById('openPopup').onclick = function () {
        document.getElementById('messagePopup').classList.remove('hidden');
    };

    document.getElementById('closePopup').onclick = function () {
        document.getElementById('messagePopup').classList.add('hidden');
    };

    document.getElementById('sendMessage').onclick = async function () {
        const message = document.getElementById('message').value;
        if (message.trim() === '') {
            alert('กรุณาพิมพ์ข้อความก่อนส่ง!');
            return;
        }
        
        const webhookURL = 'https://ptb.discord.com/api/webhooks/1294933966662533121/jiTfTB4xDXH12-1wBw9Fe3b_6SeNBw1MF_UM7vEN2nWlZWpaifcbNTBBssrcQNArgDIZ'; 
        try {
            const response = await fetch(webhookURL, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    content: message,
                }),
            });

            if (response.ok) {
                document.getElementById('message').value = ''; 
                document.getElementById('messagePopup').classList.add('hidden');
                document.getElementById('successAlert').classList.remove('hidden');
                setTimeout(() => {
                    document.getElementById('successAlert').classList.add('hidden');
                }, 3000); 
            } else {
                alert('เกิดข้อผิดพลาดในการส่งข้อความ.');
            }
        } catch (error) {
            alert('เกิดข้อผิดพลาดในการเชื่อมต่อ.');
        }
    };
    </script>
</body>
</html>