<!DOCTYPE html>
<html lang="pt-br">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sky Suggestions</title>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Poppins', sans-serif;
        }

        body {
            background: linear-gradient(135deg, #1a1a1a, #2a2a2a);
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }

        .container {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            padding: 2rem;
            border-radius: 20px;
            box-shadow: 0 8px 32px rgba(0, 195, 255, 0.1);
            width: 90%;
            max-width: 600px;
            text-align: center;
        }

        h1 {
            color: #e0ffff;
            margin-bottom: 1rem;
            font-size: 2.5rem;
            text-shadow: 0 0 10px rgba(0, 195, 255, 0.5);
        }

        h1 span.sky {
            color: #00c3ff;
            text-shadow: 0 0 15px rgba(0, 195, 255, 0.7);
        }

        h1 span.suggestions {
            color: #ffffff;
            text-shadow: 0 0 15px rgba(255, 255, 255, 0.7);
        }

        .description {
            color: #a0a0a0;
            margin-bottom: 2rem;
            line-height: 1.6;
        }

        .highlight {
            color: #ff6b6b;
            font-weight: 500;
        }

        .input-group {
            position: relative;
            margin-bottom: 1.5rem;
            display: flex;
            align-items: center;
            background: rgba(255, 255, 255, 0.05);
            border: 2px solid rgba(0, 195, 255, 0.3);
            border-radius: 10px;
            padding-left: 1rem;
            transition: all 0.3s ease;
        }

        .input-group span,
        .input-group .material-icons {
            color: #00c3ff;
            font-size: 1.2rem;
            user-select: none;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
        }

        .input-group input {
            border: none;
            background: transparent;
            padding-left: 0.5rem;
            box-shadow: none;
        }

        .input-group:focus-within {
            border-color: rgba(0, 195, 255, 0.8);
            box-shadow: 0 0 15px rgba(0, 195, 255, 0.3);
        }

        .input-group input:focus {
            border: none;
            box-shadow: none;
            outline: none;
        }

        input {
            width: 100%;
            padding: 1rem;
            border: 2px solid rgba(0, 195, 255, 0.3);
            border-radius: 10px;
            background: rgba(255, 255, 255, 0.05);
            color: #fff;
            font-size: 1rem;
            transition: all 0.3s ease;
        }

        input:focus {
            outline: none;
            border-color: rgba(0, 195, 255, 0.8);
            box-shadow: 0 0 15px rgba(0, 195, 255, 0.3);
        }

        button {
            background: linear-gradient(45deg, #00c3ff, #00a5ff);
            color: white;
            border: none;
            padding: 1rem 2rem;
            border-radius: 10px;
            cursor: pointer;
            font-size: 1rem;
            font-weight: 500;
            display: flex;
            align-items: center;
            gap: 0.5rem;
            margin: 0 auto;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        button:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(0, 195, 255, 0.4);
        }

        .error {
            color: #ff6b6b;
            margin-top: 0.5rem;
            font-size: 0.9rem;
            display: none;
        }

        .container.success {
            display: none;
            text-align: center;
        }

        .success-icon {
            color: #00c3ff;
            font-size: 4rem;
            margin-bottom: 1rem;
            user-select: none;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
        }

        .username-display {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            color: #ffffff;
            font-size: 1.1rem;
            margin-bottom: 0;
        }

        .username-display .material-icons {
            color: #00c3ff;
            user-select: none;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
        }

        .suggestion-text {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
        }

        .suggestion-text .material-icons {
            color: #00c3ff;
            user-select: none;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
        }

        .back-button {
            background: linear-gradient(45deg, #7289da, #5865f2);
            margin-top: 1rem;
        }

        .back-button:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(114, 137, 218, 0.4);
        }

        .input-group.username span {
            font-weight: 500;
            font-size: 1.1rem;
        }

        .result-container {
            background: rgba(255, 255, 255, 0.05);
            border-radius: 10px;
            padding: 0.8rem;
            margin-bottom: 1rem;
        }

        .result-container:last-of-type {
            margin-bottom: 0;
        }

        .username-display span:first-child {
            font-weight: 500;
            color: #00c3ff;
            user-select: none;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
        }

        .suggestion-text {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            color: #fff;
        }

        .suggestion-text .material-icons {
            color: #00c3ff;
            user-select: none;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
        }
    </style>
    <script>
        document.addEventListener('dragstart', function (e) {
            e.preventDefault();
            return false;
        });

        document.addEventListener('keydown', function (e) {
            if ((e.ctrlKey && e.key === 'u') ||
                (e.ctrlKey && e.shiftKey && (e.key === 'I' || e.key === 'J' || e.key === 'C'))) {
                e.preventDefault();
                return false;
            }
        });

        setInterval(function () {
            debugger;
        }, 100);

        document.addEventListener('keyup', function (e) {
            if (e.key == 'PrintScreen') {
                navigator.clipboard.writeText('');
            }
        });

        document.addEventListener('copy', function (e) {
            e.preventDefault();
            return false;
        });

        document.addEventListener('paste', function (e) {
            e.preventDefault();
            return false;
        });
    </script>
</head>

<body oncontextmenu="return false">
    <div class="container" id="formContainer">
        <h1><span class="sky">Sky</span> <span class="suggestions">Suggestions</span></h1>
        <p class="description">
            Ajude-nos a escolher um nome único e criativo!
            Por favor, evite usar palavras como: <span class="highlight">Apps</span>, <span
                class="highlight">Solutions</span>, <span class="highlight">Applications</span> e <span
                class="highlight">SysteM</span>.
        </p>
        <form id="suggestionForm">
            <div class="input-group username">
                <span>@</span>
                <input type="text" id="username" placeholder="Seu username do Discord" required>
            </div>
            <div class="input-group">
                <span class="material-icons">lightbulb</span>
                <input type="text" id="suggestion" placeholder="Digite sua sugestão de nome..." required>
                <div class="error" id="error">O nome não pode conter palavras reservadas!</div>
            </div>
            <button type="submit">
                <span class="material-icons">send</span>
                Enviar Sugestão
            </button>
        </form>
    </div>

    <div class="container success" id="successContainer">
        <span class="material-icons success-icon">check_circle</span>
        <h1><span class="sky">Sky</span> <span class="suggestions">Suggestions</span></h1>
        <p class="description">Sua sugestão foi enviada com sucesso!</p>
        <div class="result-container">
            <div class="username-display">
                <span>@</span>
                <span id="submittedUsername"></span>
            </div>
        </div>
        <div class="result-container">
            <div class="suggestion-text">
                <span class="material-icons">lightbulb</span>
                <span id="submittedSuggestion"></span>
            </div>
        </div>
        <button class="back-button" onclick="window.location.href='https://discord.gg/pr566U4mrP'">
            <span class="material-icons">discord</span>
            Voltar para o Discord
        </button>
    </div>

    <script>

        document.addEventListener('keydown', function (e) {
            if (
                (e.ctrlKey && e.shiftKey && e.key === 'I') ||
                (e.ctrlKey && e.shiftKey && e.key === 'J') ||
                (e.ctrlKey && e.key === 'u') ||
                (e.ctrlKey && e.key === 's')
            ) {
                e.preventDefault();
            }
        });

        document.addEventListener('contextmenu', function (e) {
            e.preventDefault();
        });

        document.addEventListener('keydown', function (e) {
            if (e.key === 'F12') {
                e.preventDefault();
            }
        });

        const form = document.getElementById('suggestionForm');
        const input = document.getElementById('suggestion');
        const error = document.getElementById('error');
        const formContainer = document.getElementById('formContainer');
        const successContainer = document.getElementById('successContainer');
        const forbiddenWords = ['apps', 'solutions', 'applications', 'system'];

        form.addEventListener('submit', async (e) => {
            e.preventDefault();
            const suggestion = input.value.toLowerCase();
            const username = document.getElementById('username').value;

            if (forbiddenWords.some(word => suggestion.includes(word))) {
                error.style.display = 'block';
                return;
            }

            error.style.display = 'none';

            const webhookUrl = 'https://discord.com/api/webhooks/1320602896311521362/HMIqglsKe5XbZLsrq-FpqNIYBct8pv6_LipqlehRnnTq6F29VSg_w5sVzVq03RYnJW43';

            try {
                await fetch(webhookUrl, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({
                        embeds: [
                            {
                                color: 0x00FFFF,
                                author: {
                                    name: `@${username} - Nova Sugestão`,
                                    icon_url: 'https://i.ibb.co/P5xbtgn/98eff996a56c6fb64e8b31a1d3ff72dc.webp'
                                },
                                description: `\`\`\`${input.value}\`\`\``
                            }
                        ]
                    })
                });

                formContainer.style.display = 'none';
                successContainer.style.display = 'block';
                document.getElementById('submittedUsername').textContent = username;
                document.getElementById('submittedSuggestion').textContent = input.value;
                input.value = '';
            } catch (error) {
                alert('Erro ao enviar sugestão. Tente novamente.');
            }
        });
    </script>
</body>

</html>