Drawaria Minimalistic

Вы давно хотели убрать всю рекламу в драварии? Сделать красивейшее меню? А может ещё и кнопки? Тогда этот скрипт поможет вам!

Voor het installeren van scripts heb je een extensie nodig, zoals Tampermonkey, Greasemonkey of Violentmonkey.

Voor het installeren van scripts heb je een extensie nodig, zoals {tampermonkey_link:Tampermonkey}.

Voor het installeren van scripts heb je een extensie nodig, zoals Tampermonkey of Violentmonkey.

Voor het installeren van scripts heb je een extensie nodig, zoals Tampermonkey of Userscripts.

Voor het installeren van scripts heb je een extensie nodig, zoals {tampermonkey_link:Tampermonkey}.

Voor het installeren van scripts heb je een gebruikersscriptbeheerder nodig.

(Ik heb al een user script manager, laat me het downloaden!)

Voor het installeren van gebruikersstijlen heb je een extensie nodig, zoals {stylus_link:Stylus}.

Voor het installeren van gebruikersstijlen heb je een extensie nodig, zoals {stylus_link:Stylus}.

Voor het installeren van gebruikersstijlen heb je een extensie nodig, zoals {stylus_link:Stylus}.

Voor het installeren van gebruikersstijlen heb je een gebruikersstijlbeheerder nodig.

Voor het installeren van gebruikersstijlen heb je een gebruikersstijlbeheerder nodig.

Voor het installeren van gebruikersstijlen heb je een gebruikersstijlbeheerder nodig.

(Ik heb al een beheerder - laat me doorgaan met de installatie!)

// ==UserScript==
// @name         Drawaria Minimalistic
// @namespace    http://tampermonkey.net/
// @version      1.5.1
// @description  Вы давно хотели убрать всю рекламу в драварии? Сделать красивейшее меню? А может ещё и кнопки? Тогда этот скрипт поможет вам!
// @author       𝓚𝓡𝓘𝓢𝓟𝓘 𝓥𝓐.
// @match       https://drawaria.online/
// @grant        none
// @license MIT
// ==/UserScript==

(function() {
    'use strict';


    const removeSelectors = [
        ".extimages",
        "#gameadsbanner",
        ".sitelogo",
        ".footer",
        "#browserwarning",
        "#yandex_rtb_R-A-669506-1",
        ".row.promlinks"
    ];
    removeSelectors.forEach(sel => document.querySelectorAll(sel).forEach(el => el.remove()));


    let bgDiv = document.createElement("div");
    bgDiv.id = "bgDiv";
    Object.assign(bgDiv.style, {
        position: "fixed",
        top: "0",
        left: "0",
        width: "100%",
        height: "100%",
        zIndex: "0",
        pointerEvents: "none",
        backgroundSize: "200% 200%",
        transition: "background 0.5s"
    });
    document.body.insertBefore(bgDiv, document.body.firstChild);


    const loginContainer = document.getElementById("login-midcol");
    if (loginContainer) loginContainer.style.background = "transparent";


    const menu = document.createElement("div");
    Object.assign(menu.style, {
        position: "fixed",
        top: "10px",
        left: "10px",
        zIndex: 9999,
        padding: "10px",
        borderRadius: "10px",
        background: "rgba(0,0,0,0.7)",
        color: "white",
        fontFamily: "sans-serif",
        cursor: "move",
        userSelect: "none",
        width: "200px"
    });

    menu.innerHTML =
        `<label>Выбор градиента:</label>
        <select id="gradient-picker" style="margin:5px 0; padding:5px; width:100%;">
            <option value="linear-gradient(135deg, rgb(0,198,255), rgb(0,114,255))">Синий-голубой</option>
            <option value="linear-gradient(135deg, rgb(255,0,128), rgb(255,102,0))">Розовый-оранж</option>
            <option value="linear-gradient(135deg, rgb(0,255,128), rgb(0,128,255))">Зелёный-синий</option>
        </select>

        <label>Тип градиента:</label>
        <select id="gradient-type" style="margin:5px 0; padding:5px; width:100%;">
            <option value="static">Статический</option>
            <option value="animated">Переливающийся</option>
        </select>

        <div style="margin-top:5px;">
            <button id="menu-decrease" style="padding:3px 6px;">-</button>
            <button id="menu-increase" style="padding:3px 6px;">+</button>
        </div>
    `;

    document.body.appendChild(menu);

    const gradientPicker = document.getElementById("gradient-picker");
    const gradientType = document.getElementById("gradient-type");
    const buttons = document.querySelectorAll(".btn");

    function applyGradient() {
        const grad = gradientPicker.value;
        const type = gradientType.value;

        if (type === "animated") {
            bgDiv.style.background = grad;
            bgDiv.style.backgroundSize = "200% 200%";
            bgDiv.style.animation = "gradientAnim 10s ease infinite";
        } else {
            bgDiv.style.background = grad;
            bgDiv.style.animation = "none";
        }

        buttons.forEach(btn => {
            btn.style.background = grad;
            btn.style.color = "white";
            btn.style.fontWeight = "bold";
            btn.style.border = "none";
        });

        gradientPicker.style.background = grad;
        gradientPicker.style.color = "white";
    }

    gradientPicker.addEventListener("change", applyGradient);
    gradientType.addEventListener("change", applyGradient);
    applyGradient();


    document.getElementById("menu-decrease").addEventListener("click", () => menu.style.transform = "scale(0.7)");
    document.getElementById("menu-increase").addEventListener("click", () => menu.style.transform = "scale(1.3)");


    let isDragging = false, offsetX, offsetY;
    menu.addEventListener('mousedown', e => {
        isDragging = true;
        offsetX = e.clientX - menu.offsetLeft;
        offsetY = e.clientY - menu.offsetTop;
    });
    document.addEventListener('mousemove', e => {
        if (isDragging){
            menu.style.left = (e.clientX - offsetX) + "px";
            menu.style.top = (e.clientY - offsetY) + "px";
        }
    });
    document.addEventListener('mouseup', e => { isDragging = false; });


    const styleSheet = document.createElement("style");
    styleSheet.innerHTML =
        `@keyframes gradientAnim {
            0% {background-position:0% 50%;}
            50% {background-position:100% 50%;}
            100% {background-position:0% 50%;}
        }
    `;
    document.head.appendChild(styleSheet);

})();