Greasy Fork is available in English.

Moderator Panel YouTubeDrawaria

Moderator panel for Drawaria

// ==UserScript==
// @name         Moderator Panel YouTubeDrawaria
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  Moderator panel for Drawaria
// @author       YouTubeDrawaria
// @match        https://drawaria.online/modpanel
// @icon         https://www.google.com/s2/favicons?sz=64&domain=drawaria.online
// @grant        none
// @license      MIT
// ==/UserScript==

(function() {
    'use strict';

    // Verify if the page has fully loaded
    window.addEventListener('load', function() {
        console.log('Page has fully loaded.');

        // Clear original page content
        document.body.innerHTML = '';

        // Change the page title
        document.title = 'Mod Panel - Drawaria';

        // Create and add the moderator panel container with effects
        let modPanelContainer = document.createElement('div');
        modPanelContainer.id = 'mod-panel';
        modPanelContainer.style.display = 'flex';
        modPanelContainer.style.height = '100vh';
        modPanelContainer.style.transition = 'all 0.5s ease';

        // Moderator panel content with modern effects and colors
        modPanelContainer.innerHTML = `
    <div id="mod-sidebar" style="width: 250px; background: linear-gradient(135deg, #1e3a8a, #3b82f6); color: #fff; padding: 20px; box-shadow: 0 0 15px rgba(0, 0, 0, 0.2); transition: width 0.3s ease;">
        <img src="https://drawaria.online/apple-touch-icon.png" alt="Logo" style="display: block; margin: 0 auto 20px auto; width: 80px; height: 80px;">
        <h1 style="font-size: 24px; margin-bottom: 20px; text-align: center;">Moderation Panel</h1>
        <ul style="list-style: none; padding: 0;">
            <li style="margin-bottom: 10px; transition: all 0.3s;"><a href="#" data-section="home" style="color: #fff; text-decoration: none;">Home</a></li>
            <li style="margin-bottom: 10px; transition: all 0.3s;"><a href="#" data-section="user-management" style="color: #fff; text-decoration: none;">User Management</a></li>
            <li style="margin-bottom: 10px; transition: all 0.3s;"><a href="#" data-section="content-management" style="color: #fff; text-decoration: none;">Content Management</a></li>
            <li style="margin-bottom: 10px; transition: all 0.3s;"><a href="#" data-section="reports" style="color: #fff; text-decoration: none;">Reports</a></li>
        </ul>
    </div>
            <div id="mod-content" style="flex: 1; padding: 20px; background: #f9fafb; border-radius: 8px; box-shadow: 0 0 15px rgba(0, 0, 0, 0.1); margin: 20px; overflow-y: auto; transition: all 0.3s ease;">
                <div id="home" class="mod-section active" style="display: block; animation: fadeIn 0.5s;">
                    <h2>Welcome to the Moderation Panel</h2>
                    <p>This panel is designed to help you manage the Drawaria community efficiently. Here you can:</p>
                    <ul style="list-style: disc; padding-left: 20px;">
                        <li>Manage users and their actions.</li>
                        <li>Review and manage reported content.</li>
                        <li>Resolve issues and maintain a safe and friendly environment.</li>
                    </ul>
                    <p>Select an option from the sidebar to get started.</p>
                    <div style="margin-top: 20px;">
                        <h3>News and Updates</h3>
                        <p>Last update: 2024-08-19</p>
                        <ul style="list-style: disc; padding-left: 20px;">
                            <li>Improved UI for the moderation panel.</li>
                            <li>New tools for content management.</li>
                            <li>Optimized reporting system.</li>
                            <br><a href="https://www.youtube.com/@YouTubeDrawaria?sub_confirmation=1" target="_blank" style="color: #3b82f6; text-decoration: none;">Moderator Guidelines</a>
                        </ul>
                    </div>
                </div>
                <div id="user-management" class="mod-section" style="display: none; animation: fadeIn 0.5s;">
                    <h2>User Management</h2>
                    <div class="mod-option" style="margin-bottom: 15px;">
                        <label for="playername" style="display: block; margin-bottom: 5px; font-weight: bold;">Rename Player</label>
                        <input type="text" id="playername" placeholder="Type name" value="" maxlength="30" style="width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; transition: all 0.3s ease;">
                    </div>
                    <div class="mod-option" style="margin-bottom: 15px;">
                        <button id="rename-user" style="width: 100%; padding: 10px; border: none; border-radius: 4px; background: #3b82f6; color: #fff; cursor: pointer; transition: background 0.3s ease;">Rename Player</button>
                    </div>
<div class="mod-option" style="margin-bottom: 15px;">
                        <label for="playername" style="display: block; margin-bottom: 5px; font-weight: bold;">Mute Player</label>
                        <input type="text" id="playername" placeholder="Type name" value="" maxlength="30" style="width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; transition: all 0.3s ease;">
                    </div>
                    <div class="mod-option" style="margin-bottom: 15px;">
                        <button id="muted-user" style="width: 100%; padding: 10px; border: none; border-radius: 4px; background: #3b82f6; color: #fff; cursor: pointer; transition: background 0.3s ease;">Mute Player</button>
                    </div>
                    <div class="mod-option" style="margin-bottom: 15px;">
                        <label for="avatarcontainer" style="display: block; margin-bottom: 5px; font-weight: bold;">Ban Player</label>
                        <div id="avatarcontainer">
                            <img id="selfavatarimage" src="/avatar/cache/86e33830-86ea-11ec-8553-bff27824cf71.jpg" style="border-radius: 50%; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); transition: transform 0.3s ease;">
                        </div>
                    </div>
                    <div class="mod-option" style="margin-bottom: 15px;">
                        <button id="ban-user" style="width: 100%; padding: 10px; border: none; border-radius: 4px; background: #3b82f6; color: #fff; cursor: pointer; transition: background 0.3s ease;">Ban Player</button>
                    </div>
                </div>
                <div id="content-management" class="mod-section" style="display: none; animation: fadeIn 0.5s;">
                    <h2>Content Management</h2>
                    <div class="mod-option" style="margin-bottom: 15px;">
                        <label for="content-id" style="display: block; margin-bottom: 5px; font-weight: bold;">Content ID</label>
                        <input type="text" id="content-id" placeholder="Content ID" style="width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; transition: all 0.3s ease;">
                    </div>
                    <div class="form-group" style="margin-bottom: 15px;">
                        <label for="content-reason" class="col-form-label" style="display: block; margin-bottom: 5px; font-weight: bold;">Reason</label>
                        <select id="content-reason" class="custom-select" required="" style="width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; transition: all 0.3s ease;">
                            <option value="">&nbsp;</option>
                            <option value="hacking">Hacking / exploits</option>
                            <option value="sexual">Sexual drawings</option>
                            <option value="inappropriate">Inappropriate comments</option>
                            <option value="offensive">Offensive content</option>
                            <option value="spam">Spam</option>
                            <option value="other">Other</option>
                        </select>
                    </div>
                    <div class="mod-option" style="margin-bottom: 15px;">
                        <button id="delete-content" style="width: 100%; padding: 10px; border: none; border-radius: 4px; background: #3b82f6; color: #fff; cursor: pointer; transition: background 0.3s ease;">Delete Content</button>
                    </div>
                </div>
                <div id="reports" class="mod-section" style="display: none; animation: fadeIn 0.5s;">
                    <h2>Reports</h2>
                    <div class="mod-option" style="margin-bottom: 15px;">
                        <label for="report-id" style="display: block; margin-bottom: 5px; font-weight: bold;">Report ID</label>
                        <input type="text" id="report-id" placeholder="Report ID" style="width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; transition: all 0.3s ease;">
                    </div>
                    <div class="form-group" style="margin-bottom: 15px;">
                        <label for="report-reason" class="col-form-label" style="display: block; margin-bottom: 5px; font-weight: bold;">Reason</label>
                        <select id="report-reason" class="custom-select" required="" style="width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; transition: all 0.3s ease;">
                            <option value="">&nbsp;</option>
                            <option value="hack">Hacking / exploits</option>
                            <option value="bot">Bot</option>
                            <option value="spam">Spamming</option>
                            <option value="content">Inappropriate drawings / Offensive content</option>
                            <option value="other">Other</option>
                        </select>
                    </div>
                    <div class="mod-option" style="margin-bottom: 15px;">
                        <button id="resolve-report" style="width: 100%; padding: 10px; border: none; border-radius: 4px; background: #3b82f6; color: #fff; cursor: pointer; transition: background 0.3s ease;">Resolve Report</button>
                    </div>
                </div>
            </div>
        `;

        // Add the container to the body of the page
        document.body.appendChild(modPanelContainer);

        // Functions to handle interactions with smooth animations
        document.querySelectorAll('#mod-sidebar a').forEach(link => {
            link.addEventListener('click', function(e) {
                e.preventDefault();
                const sectionId = this.getAttribute('data-section');
                document.querySelectorAll('.mod-section').forEach(section => {
                    section.classList.remove('active');
                    section.style.display = 'none';
                });
                document.getElementById(sectionId).classList.add('active');
                document.getElementById(sectionId).style.display = 'block';
                document.getElementById(sectionId).style.animation = 'fadeIn 0.5s';
            });
        });

        document.getElementById('ban-user').addEventListener('click', function() {
            alert('Player banned.');
        });

        document.getElementById('rename-user').addEventListener('click', function() {
            alert('Player Renamed.');
        });

         document.getElementById('muted-user').addEventListener('click', function() {
            alert('Player Muted.');
        });

        document.getElementById('delete-content').addEventListener('click', function() {
            alert('Content deleted.');
        });

        document.getElementById('resolve-report').addEventListener('click', function() {
            alert('Report resolved.');
        });

        // Replace the page content with effects
        let newContent = document.createElement('div');
        newContent.style.textAlign = 'center';
        newContent.style.fontSize = '24px';
        newContent.style.marginTop = '20px';
        // newContent.textContent = 'Drawaria Mod Panel';
        newContent.style.animation = 'fadeIn 0.5s ease-in-out';

        // Array of avatars with random names
        const avatars = [
            { id: '86e33830-86ea-11ec-8553-bff27824cf71', name: 'YouTube' },
            { id: 'bfbe3620-1d5e-11ef-acaf-250da20bac69', name: 'Senko' },
            { id: '418e4160-cb1f-11ed-a71d-ab56d3db7ea6', name: 'Anya' },
            { id: '98bb4180-226a-11ed-9fd3-c3a00b129da4', name: 'Shiv' },
            { id: 'c8408150-dc14-11ec-9fd3-c3a00b129da4', name: 'Tyre' },
            { id: 'a272cd50-0d42-11ef-acaf-250da20bac69', name: 'Luna' },
            { id: '52bee980-1dee-11ef-acaf-250da20bac69', name: 'Mikasa' },
            { id: 'e39f20a0-d3fc-11ee-bf00-7b802f1ca94b', name: 'Natsu' },
            { id: '2b3925e0-0425-11ed-9fd3-c3a00b129da4', name: 'Luffy' },
            { id: '331c1bb0-1e03-11ef-acaf-250da20bac69', name: 'Ethan' }
        ];

        // Function to generate the list of avatars
        function generateAvatarList() {
            const avatarContainer = document.getElementById('avatarcontainer');
            avatarContainer.innerHTML = ''; // Clear the container before adding new avatars

            avatars.forEach(avatar => {
                const avatarDiv = document.createElement('div');
                avatarDiv.style.display = 'inline-block';
                avatarDiv.style.marginRight = '10px';
                avatarDiv.style.cursor = 'pointer';
                avatarDiv.style.transition = 'transform 0.3s ease';
                avatarDiv.title = avatar.name;

                const avatarImg = document.createElement('img');
                avatarImg.src = `/avatar/cache/${avatar.id}.jpg`;
                avatarImg.style.width = '60';
                avatarImg.style.height = '60px';
                avatarImg.style.borderRadius = '50%';
                avatarImg.style.boxShadow = '0 0 10px rgba(0, 0, 0, 0.2)';
                avatarImg.style.transition = 'transform 0.3s ease';

                avatarDiv.appendChild(avatarImg);
                avatarContainer.appendChild(avatarDiv);

                // Event to change the selected avatar and update the name
                avatarDiv.addEventListener('click', function() {
                    document.getElementById('selfavatarimage').src = `/avatar/cache/${avatar.id}.jpg`;
                    document.getElementById('playername').value = avatar.name;
                    avatarDiv.style.transform = 'scale(1.2)';
                    setTimeout(() => {
                        avatarDiv.style.transform = 'scale(1)';
                    }, 300);
                });
            });
        }

        // Call the function to generate the list of avatars
        generateAvatarList();

        // Add the new content to the body of the page
        document.body.appendChild(newContent);
    });
})();

// CSS Animations
const style = document.createElement('style');
style.innerHTML = `
    @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }
    body, html {
    font-family: Calibri;
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
    }
`;
document.head.appendChild(style);