Custom Background Changer

Плавающие кнопки для смены фона: предустановки, своё изображение, сброс.

이 스크립트를 설치하려면 Tampermonkey, Greasemonkey 또는 Violentmonkey와 같은 확장 프로그램이 필요합니다.

이 스크립트를 설치하려면 Tampermonkey와 같은 확장 프로그램을 설치해야 합니다.

이 스크립트를 설치하려면 Tampermonkey 또는 Violentmonkey와 같은 확장 프로그램이 필요합니다.

이 스크립트를 설치하려면 Tampermonkey 또는 Userscripts와 같은 확장 프로그램이 필요합니다.

이 스크립트를 설치하려면 Tampermonkey와 같은 확장 프로그램이 필요합니다.

이 스크립트를 설치하려면 유저 스크립트 관리자 확장 프로그램이 필요합니다.

(이미 유저 스크립트 관리자가 설치되어 있습니다. 설치를 진행합니다!)

이 스타일을 설치하려면 Stylus와 같은 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 Stylus와 같은 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 Stylus와 같은 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 유저 스타일 관리자 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 유저 스타일 관리자 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 유저 스타일 관리자 확장 프로그램이 필요합니다.

(이미 유저 스타일 관리자가 설치되어 있습니다. 설치를 진행합니다!)

// ==UserScript==
// @name         Custom Background Changer
// @namespace    https://bigbaazi-onlinecasino.com
// @version      2.0
// @license      MIT
// @description  Плавающие кнопки для смены фона: предустановки, своё изображение, сброс.
// @author       User
// @match        *://*/*
// @grant        none
// ==/UserScript==

(function () {
    'use strict';

    // ─── Конфигурация ───────────────────────────────────────────────────────────

    const STORAGE_KEY = 'customBgStyle';

    const PRESETS = [
        { name: 'Белый',              style: '#ffffff' },
        { name: 'Серый',              style: '#e0e0e0' },
        { name: 'Пастельный синий',   style: '#b8e1fc' },
        { name: 'Мятный',             style: '#b9f6ca' },
        { name: 'Градиент — закат',   style: 'linear-gradient(135deg, #ff9a9e, #fad0c4)' },
        { name: 'Градиент — ночь',    style: 'linear-gradient(135deg, #2c3e50, #000000)' },
    ];

    // ─── Применение фона ────────────────────────────────────────────────────────

    function applyBackground(style) {
        document.body.style.background           = style;
        document.body.style.backgroundSize       = 'cover';
        document.body.style.backgroundAttachment = 'fixed';
        localStorage.setItem(STORAGE_KEY, style);
    }

    function resetBackground() {
        document.body.style.background           = '';
        document.body.style.backgroundSize       = '';
        document.body.style.backgroundAttachment = '';
        localStorage.removeItem(STORAGE_KEY);
    }

    // ─── Фабрика кнопок ─────────────────────────────────────────────────────────

    function createButton({ label, color, rightOffset }) {
        const btn = document.createElement('button');
        btn.textContent = label;
        Object.assign(btn.style, {
            position:        'fixed',
            bottom:          '20px',
            right:           `${rightOffset}px`,
            zIndex:          '9999',
            padding:         '8px 16px',
            backgroundColor: color,
            color:           'white',
            border:          'none',
            borderRadius:    '20px',
            cursor:          'pointer',
            fontFamily:      'sans-serif',
            fontSize:        '14px',
            boxShadow:       '0 2px 10px rgba(0,0,0,0.3)',
            transition:      'opacity 0.2s',
        });
        btn.addEventListener('mouseover', () => { btn.style.opacity = '0.85'; });
        btn.addEventListener('mouseout',  () => { btn.style.opacity = '1'; });
        document.body.appendChild(btn);
        return btn;
    }

    // ─── Кнопка «Сменить фон» ───────────────────────────────────────────────────

    let currentIndex = 0;

    const cycleBtn = createButton({
        label:       '🎨 Сменить фон',
        color:       '#2c3e50',
        rightOffset: 20,
    });

    cycleBtn.addEventListener('click', () => {
        currentIndex = (currentIndex + 1) % PRESETS.length;
        const { name, style } = PRESETS[currentIndex];
        applyBackground(style);
        cycleBtn.textContent = `🎨 ${name}`;
    });

    // ─── Кнопка «Своё фото» ─────────────────────────────────────────────────────

    const fileInput = Object.assign(document.createElement('input'), {
        type:   'file',
        accept: 'image/*',
    });
    fileInput.style.display = 'none';
    document.body.appendChild(fileInput);

    const uploadBtn = createButton({
        label:       '📷 Своё фото',
        color:       '#27ae60',
        rightOffset: 155,
    });

    uploadBtn.addEventListener('click', () => fileInput.click());

    fileInput.addEventListener('change', () => {
        const file = fileInput.files[0];
        if (!file) return;
        const reader = new FileReader();
        reader.onload = ({ target }) => {
            const style = `url(${target.result}) no-repeat center center`;
            applyBackground(style);
            cycleBtn.textContent = '🎨 Свой фон';
        };
        reader.readAsDataURL(file);
    });

    // ─── Кнопка «Сброс» ─────────────────────────────────────────────────────────

    const resetBtn = createButton({
        label:       '✖ Сброс',
        color:       '#c0392b',
        rightOffset: 275,
    });

    resetBtn.addEventListener('click', () => {
        resetBackground();
        currentIndex = 0;
        cycleBtn.textContent = '🎨 Сменить фон';
    });

    // ─── Восстановление последнего фона ─────────────────────────────────────────

    const savedStyle = localStorage.getItem(STORAGE_KEY);
    if (savedStyle) {
        applyBackground(savedStyle);
        const matchedIndex = PRESETS.findIndex(p => p.style === savedStyle);
        if (matchedIndex !== -1) {
            currentIndex = matchedIndex;
            cycleBtn.textContent = `🎨 ${PRESETS[currentIndex].name}`;
        } else {
            cycleBtn.textContent = '🎨 Свой фон';
        }
    }

})();