<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vulpes - Invite</title>
    <link rel="icon" href="https://uxwing.com/wp-content/themes/uxwing/download/brands-and-social-media/discord-round-color-icon.png">
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        body {
            background-color: #131314;
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            color: white;
        }

        .container {
            width: 80%;
            max-width: 500px;
            text-align: center;
        }

        .permissions {
            max-height: 300px;
            overflow-y: auto;
            margin: 20px 0;
            padding: 10px;
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 5px;
            background-color: #1e1f21;
        }

        .permissions::-webkit-scrollbar {
            width: 8px;
        }

        .permissions::-webkit-scrollbar-thumb {
            background-color: #5865F2;
            border-radius: 5px;
        }

        .permission {
            display: flex;
            align-items: center;
            margin: 10px 0;
        }

        .permission input[type="checkbox"] {
            appearance: none;
            width: 20px;
            height: 20px;
            background-color: #444;
            border: 2px solid #fff;
            border-radius: 3px;
            margin-right: 10px;
            cursor: pointer;
            position: relative;
        }

        .permission input[type="checkbox"]:checked {
            background-color: #5865F2;
            border-color: #5865F2;
        }

        .permission input[type="checkbox"]:checked::before {
            content: '✓';
            color: white;
            font-size: 16px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        .generate-link {
            margin-top: 20px;
            padding: 10px 20px;
            background-color: #5865F2;
            color: white;
            border: none;
            border-radius: 50px;
            cursor: pointer;
        }

        .generate-link:disabled {
            background-color: #4B5563;
        }

        .result {
            margin-top: 20px;
        }

        .footer-text {
            position: absolute;
            bottom: 10px; 
            left: 50%;
            transform: translateX(-50%);
            font-size: 12px; 
            color: rgba(255, 255, 255, 0.7); 
        }
    </style>
</head>
<body>
    <div class="container">
        <h2 class="text-2xl font-bold mb-4">Choose permissions to invite with</h2>
        <div class="permissions" id="permissions-box">
            <div class="permission">
                <input type="checkbox" id="admin" onclick="toggleAdmin()">
                <label for="admin">Administrator</label>
            </div>
            <div class="permission">
                <input type="checkbox" class="permission-checkbox" id="viewAuditLog" onclick="updatePermissions()">
                <label for="viewAuditLog">View Audit Log</label>
            </div>
            <div class="permission">
                <input type="checkbox" class="permission-checkbox" id="manageGuild" onclick="updatePermissions()">
                <label for="manageGuild">Manage Server</label>
            </div>
            <div class="permission">
                <input type="checkbox" class="permission-checkbox" id="manageRoles" onclick="updatePermissions()">
                <label for="manageRoles">Manage Roles</label>
            </div>
            <div class="permission">
                <input type="checkbox" class="permission-checkbox" id="manageChannels" onclick="updatePermissions()">
                <label for="manageChannels">Manage Channels</label>
            </div>
            <div class="permission">
                <input type="checkbox" class="permission-checkbox" id="kickMembers" onclick="updatePermissions()">
                <label for="kickMembers">Kick Members</label>
            </div>
            <div class="permission">
                <input type="checkbox" class="permission-checkbox" id="banMembers" onclick="updatePermissions()">
                <label for="banMembers">Ban Members</label>
            </div>
            <div class="permission">
                <input type="checkbox" class="permission-checkbox" id="createInstantInvite" onclick="updatePermissions()">
                <label for="createInstantInvite">Create Instant Invite</label>
            </div>
            <div class="permission">
                <input type="checkbox" class="permission-checkbox" id="changeNickname" onclick="updatePermissions()">
                <label for="changeNickname">Change Nickname</label>
            </div>
            <div class="permission">
                <input type="checkbox" class="permission-checkbox" id="manageNicknames" onclick="updatePermissions()">
                <label for="manageNicknames">Manage Nicknames</label>
            </div>
            <div class="permission">
                <input type="checkbox" class="permission-checkbox" id="manageExpressions" onclick="updatePermissions()">
                <label for="manageExpressions">Manage Expressions</label>
            </div>
            <div class="permission">
                <input type="checkbox" class="permission-checkbox" id="createExpressions" onclick="updatePermissions()">
                <label for="createExpressions">Create Expressions</label>
            </div>
            <div class="permission">
                <input type="checkbox" class="permission-checkbox" id="manageWebhooks" onclick="updatePermissions()">
                <label for="manageWebhooks">Manage Webhooks</label>
            </div>
            <div class="permission">
                <input type="checkbox" class="permission-checkbox" id="viewChannel" onclick="updatePermissions()">
                <label for="viewChannel">View Channels</label>
            </div>
            <div class="permission">
                <input type="checkbox" class="permission-checkbox" id="manageEvents" onclick="updatePermissions()">
                <label for="manageEvents">Manage Events</label>
            </div>
            <div class="permission">
                <input type="checkbox" class="permission-checkbox" id="createEvents" onclick="updatePermissions()">
                <label for="createEvents">Create Events</label>
            </div>
            <div class="permission">
                <input type="checkbox" class="permission-checkbox" id="moderateMembers" onclick="updatePermissions()">
                <label for="moderateMembers">Moderate Members</label>
            </div>
            <div class="permission">
                <input type="checkbox" class="permission-checkbox" id="viewServerInsights" onclick="updatePermissions()">
                <label for="viewServerInsights">View Server Insights</label>
            </div>
            <div class="permission">
                <input type="checkbox" class="permission-checkbox" id="viewServerSubscriptionInsights" onclick="updatePermissions()">
                <label for="viewServerSubscriptionInsights">View Server Subscription Insights</label>
            </div>
            <div class="permission">
                <input type="checkbox" class="permission-checkbox" id="sendMessages" onclick="updatePermissions()">
                <label for="sendMessages">Send Messages</label>
            </div>
            <div class="permission">
                <input type="checkbox" class="permission-checkbox" id="createPublicThreads" onclick="updatePermissions()">
                <label for="createPublicThreads">Create Public Threads</label>
            </div>
            <div class="permission">
                <input type="checkbox" class="permission-checkbox" id="createPrivateThreads" onclick="updatePermissions()">
                <label for="createPrivateThreads">Create Private Threads</label>
            </div>
            <div class="permission">
                <input type="checkbox" class="permission-checkbox" id="sendMessagesInThreads" onclick="updatePermissions()">
                <label for="sendMessagesInThreads">Send Messages in Threads</label>
            </div>
            <div class="permission">
                <input type="checkbox" class="permission-checkbox" id="sendTtsMessages" onclick="updatePermissions()">
                <label for="sendTtsMessages">Send TTS Messages</label>
            </div>
            <div class="permission">
                <input type="checkbox" class="permission-checkbox" id="manageMessages" onclick="updatePermissions()">
                <label for="manageMessages">Manage Messages</label>
            </div>
            <div class="permission">
                <input type="checkbox" class="permission-checkbox" id="manageThreads" onclick="updatePermissions()">
                <label for="manageThreads">Manage Threads</label>
            </div>
            <div class="permission">
                <input type="checkbox" class="permission-checkbox" id="embedLinks" onclick="updatePermissions()">
                <label for="embedLinks">Embed Links</label>
            </div>
            <div class="permission">
                <input type="checkbox" class="permission-checkbox" id="attachFiles" onclick="updatePermissions()">
                <label for="attachFiles">Attach Files</label>
            </div>
            <div class="permission">
                <input type="checkbox" class="permission-checkbox" id="readMessageHistory" onclick="updatePermissions()">
                <label for="readMessageHistory">Read Message History</label>
            </div>
            <div class="permission">
                <input type="checkbox" class="permission-checkbox" id="mentionEveryone" onclick="updatePermissions()">
                <label for="mentionEveryone">Mention Everyone</label>
            </div>
            <div class="permission">
                <input type="checkbox" class="permission-checkbox" id="useExternalEmojis" onclick="updatePermissions()">
                <label for="useExternalEmojis">Use External Emojis</label>
            </div>
            <div class="permission">
                <input type="checkbox" class="permission-checkbox" id="useExternalStickers" onclick="updatePermissions()">
                <label for="useExternalStickers">Use External Stickers</label>
            </div>
            <div class="permission">
                <input type="checkbox" class="permission-checkbox" id="addReactions" onclick="updatePermissions()">
                <label for="addReactions">Add Reactions</label>
            </div>
            <div class="permission">
                <input type="checkbox" class="permission-checkbox" id="useSlashCommands" onclick="updatePermissions()">
                <label for="useSlashCommands">Use Slash Commands</label>
            </div>
            <div class="permission">
                <input type="checkbox" class="permission-checkbox" id="useEmbeddedActivities" onclick="updatePermissions()">
                <label for="useEmbeddedActivities">Use Embedded Activities</label>
            </div>
            <div class="permission">
                <input type="checkbox" class="permission-checkbox" id="useExternalApps" onclick="updatePermissions()">
                <label for="useExternalApps">Use External Apps</label>
            </div>
            <div class="permission">
                <input type="checkbox" class="permission-checkbox" id="createPolls" onclick="updatePermissions()">
                <label for="createPolls">Create Polls</label>
            </div>
            <div class="permission">
                <input type="checkbox" class="permission-checkbox" id="connect" onclick="updatePermissions()">
                <label for="connect">Connect</label>
            </div>
            <div class="permission">
                <input type="checkbox" class="permission-checkbox" id="speak" onclick="updatePermissions()">
                <label for="speak">Speak</label>
            </div>
            <div class="permission">
                <input type="checkbox" class="permission-checkbox" id="video" onclick="updatePermissions()">
                <label for="video">Video</label>
            </div>
            <div class="permission">
                <input type="checkbox" class="permission-checkbox" id="muteMembers" onclick="updatePermissions()">
                <label for="muteMembers">Mute Members</label>
            </div>
            <div class="permission">
                <input type="checkbox" class="permission-checkbox" id="deafenMembers" onclick="updatePermissions()">
                <label for="deafenMembers">Deafen Members</label>
            </div>
            <div class="permission">
                <input type="checkbox" class="permission-checkbox" id="moveMembers" onclick="updatePermissions()">
                <label for="moveMembers">Move Members</label>
            </div>
            <div class="permission">
                <input type="checkbox" class="permission-checkbox" id="useVad" onclick="updatePermissions()">
                <label for="useVad">Use Voice Activity</label>
            </div>
            <div class="permission">
                <input type="checkbox" class="permission-checkbox" id="prioritySpeaker" onclick="updatePermissions()">
                <label for="prioritySpeaker">Priority Speaker</label>
            </div>
            <div class="permission">
                <input type="checkbox" class="permission-checkbox" id="requestToSpeak" onclick="updatePermissions()">
                <label for="requestToSpeak">Request To Speak</label>
            </div>
            <div class="permission">
                <input type="checkbox" class="permission-checkbox" id="useEmbeddedActivities" onclick="updatePermissions()">
                <label for="useEmbeddedActivities">Use Embedded Activities</label>
            </div>
            <div class="permission">
                <input type="checkbox" class="permission-checkbox" id="useSoundboard" onclick="updatePermissions()">
                <label for="useSoundboard">Use Soundboard</label>
            </div>
            <div class="permission">
                <input type="checkbox" class="permission-checkbox" id="useExternalSounds" onclick="updatePermissions()">
                <label for="useExternalSounds">Use External Sounds</label>
            </div>
        </div>
        <button class="generate-link" onclick="generateInviteLink()">Invite</button>
        <div class="result" id="result"></div>
        <p id="selected-permissions" class="mt-4">You are currently adding Vulpes with <b>{permissions}</b></p>
        <p class="footer-text">This 'website' is AI generated</p>
    </div>

    <script>
        let previousPermissions = [];

        function toggleAdmin() {
            const adminCheckbox = document.getElementById('admin');
            const permissionCheckboxes = document.querySelectorAll('.permission-checkbox');

            if (adminCheckbox.checked) {
                previousPermissions = Array.from(permissionCheckboxes).map(checkbox => checkbox.checked);
                permissionCheckboxes.forEach(checkbox => {
                    checkbox.checked = false;
                    checkbox.disabled = true;
                    checkbox.style.opacity = '0.5';
                });
            } else {
                permissionCheckboxes.forEach((checkbox, index) => {
                    checkbox.checked = previousPermissions[index];
                    checkbox.disabled = false;
                    checkbox.style.opacity = '1';
                });
            }
            updatePermissions();
        }

        function updatePermissions() {
            const selectedPermissions = [];
            if (document.getElementById('admin').checked) {
                selectedPermissions.push('Administrator');
            } else {
                document.querySelectorAll('.permission-checkbox:checked').forEach(checkbox => {
                    const label = document.querySelector(`label[for=${checkbox.id}]`).innerText;
                    selectedPermissions.push(label);
                });
            }
            document.getElementById('selected-permissions').innerHTML = `You are currently adding Vulpes with <b>${selectedPermissions.join(', ')}</b>`;
        }

        function generateInviteLink() {
            const clientId = '1207724790635561001';
            const permissions = [];
            if (document.getElementById('admin').checked) {
                permissions.push(8);
            } else {
                document.querySelectorAll('.permission-checkbox:checked').forEach(checkbox => {
                    switch (checkbox.id) {
                        case 'viewAuditLog':
                            permissions.push(128);
                            break;
                        case 'manageGuild':
                            permissions.push(32);
                            break;
                        case 'manageRoles':
                            permissions.push(268435456);
                            break;
                        case 'manageChannels':
                            permissions.push(16);
                            break;
                        case 'kickMembers':
                            permissions.push(2);
                            break;
                        case 'banMembers':
                            permissions.push(4);
                            break;
                        case 'createInstantInvite':
                            permissions.push(1);
                            break;
                        case 'changeNickname':
                            permissions.push(67108864);
                            break;
                        case 'manageNicknames':
                            permissions.push(134217728);
                            break;
                        case 'manageExpressions':
                            permissions.push(1073741824);
                            break;
                        case 'createExpressions':
                            permissions.push(2147483648);
                            break;
                        case 'manageWebhooks':
                            permissions.push(536870912);
                            break;
                        case 'viewChannel':
                            permissions.push(1024);
                            break;
                        case 'manageEvents':
                            permissions.push(8589934592);
                            break;
                        case 'createEvents':
                            permissions.push(17179869184);
                            break;
                        case 'moderateMembers':
                            permissions.push(34359738368);
                            break;
                        case 'viewServerInsights':
                            permissions.push(68719476736);
                            break;
                        case 'viewServerSubscriptionInsights':
                            permissions.push(137438953472);
                            break;
                        case 'sendMessages':
                            permissions.push(2048);
                            break;
                        case 'createPublicThreads':
                            permissions.push(524288);
                            break;
                        case 'createPrivateThreads':
                            permissions.push(1048576);
                            break;
                        case 'sendMessagesInThreads':
                            permissions.push(2097152);
                            break;
                        case 'sendTtsMessages':
                            permissions.push(4096);
                            break;
                        case 'manageMessages':
                            permissions.push(8192);
                            break;
                        case 'manageThreads':
                            permissions.push(16384);
                            break;
                        case 'embedLinks':
                            permissions.push(65536);
                            break;
                        case 'attachFiles':
                            permissions.push(131072);
                            break;
                        case 'readMessageHistory':
                            permissions.push(262144);
                            break;
                        case 'mentionEveryone':
                            permissions.push(131072);
                            break;
                        case 'useExternalEmojis':
                            permissions.push(262144);
                            break;
                        case 'useExternalStickers':
                            permissions.push(524288);
                            break;
                        case 'addReactions':
                            permissions.push(64);
                            break;
                        case 'useSlashCommands':
                            permissions.push(2147483648);
                            break;
                        case 'useEmbeddedActivities':
                            permissions.push(4294967296);
                            break;
                        case 'useExternalApps':
                            permissions.push(8589934592);
                            break;
                        case 'createPolls':
                            permissions.push(17179869184);
                            break;
                        case 'connect':
                            permissions.push(1048576);
                            break;
                        case 'speak':
                            permissions.push(2097152);
                            break;
                        case 'video':
                            permissions.push(4194304);
                            break;
                        case 'muteMembers':
                            permissions.push(4194304);
                            break;
                        case 'deafenMembers':
                            permissions.push(8388608);
                            break;
                        case 'moveMembers':
                            permissions.push(16777216);
                            break;
                        case 'useVad':
                            permissions.push(33554432);
                            break;
                        case 'prioritySpeaker':
                            permissions.push(256);
                            break;
                        case 'requestToSpeak':
                            permissions.push(4294967296);
                            break;
                        case 'useSoundboard':
                            permissions.push(8589934592);
                            break;
                        case 'useExternalSounds':
                            permissions.push(17179869184);
                            break;
                    }
                });
            }
            const permissionBits = permissions.reduce((a, b) => a + b, 0);
            const inviteLink = `https://discord.com/oauth2/authorize?client_id=${clientId}&permissions=${permissionBits}&integration_type=0&scope=bot`;
            window.open(inviteLink, '_blank');
        }

        document.querySelectorAll('.permission-checkbox').forEach(checkbox => {
            checkbox.addEventListener('click', updatePermissions);
        });

        updatePermissions();
    </script>
</body>
</html>