💙💛Ukrainian Flag (Ctrl+Shift+U)

Ctrl+Shift+U control Show/Hide.
Ask a question, post a review, or report the script.
Wrap lines
// ==UserScript==
// @name         💙💛Ukrainian Flag (Ctrl+Shift+U)
// @namespace    tampermonkey.net
// @version      12.5
// @description  Ctrl+Shift+U control Show/Hide. 
// @author       邢智轩 (From China)
// @match        *://*/*
// @grant        none
// @license      MIT
// ==/UserScript==

(function() {
    'use strict';

    let isTerminated = false;

    function injectBadge() {
        if (document.getElementById('ua-waving-badge-root')) return;

        const host = document.createElement('div');
        host.id = 'ua-waving-badge-root';
        host.style.cssText = `
            position: fixed !important;
            bottom: 60px !important;
            left: 60px !important;
            z-index: 2147483647 !important;
            pointer-events: none !important;
            transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1) !important;
            opacity: 0;
            transform: translateX(-20px) scale(0.9);
        `;
        document.documentElement.appendChild(host);

        const shadow = host.attachShadow({mode: 'closed'});

        const tridentSvg = `data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjAwIDMwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTAwIDAgTDg1IDQ1IEw0MCA0NSBRMjAgNDUgMjAgODAgTDIwIDE4MCBRMjAgMjIwIDUwIDIyMCBMNjUgMjIwIEw2NSAxOTAgTDUwIDE5MCBRNDAgMTkwIDQwIDE3NSBMNDAgOTAgTDc1IDkwIEw4MCAxODAgUTgyIDI1MCAxMDAgMjUwIFExMTggMjUwIDEyMCAxODAgTDEyNSA5MCBMMTYwIDkwIEwxNjAgMTc1IFExNjAgMTkwIDE1MCAxOTAgTDEzNSAxOTAgTDEzNSAyMjAgTDE1MCAyMjAgUTE4MCAyMjAgMTgwIDE4MCBMMTgwIDgwIFExODAgNDUgMTYwIDQ1IEwxMTUgNDUgWiBNMTAwIDI2MCBMOTAgMzAwIEwxMTAgMzAwIFoiIGZpbGw9IiNGRkQ3MDAiLz48L3N2Zz4=`;

        shadow.innerHTML = `
        <style>
            .container {
                position: relative;
                width: 180px;
                height: 120px;
                display: flex;
                align-items: center;
                filter: drop-shadow(12px 18px 24px rgba(0,0,0,0.4));
            }

            /* --- 华丽金色旗杆系统 --- */
            .pole-system {
                position: absolute;
                left: 0;
                height: 100%;
                display: flex;
                flex-direction: column;
                align-items: center;
                z-index: 50;
            }

            /* 顶部的金属球 */
            .pole-top {
                width: 14px;
                height: 14px;
                background: radial-gradient(circle at 30% 30%, #fff9e6 0%, #ffd700 40%, #8b6914 100%);
                border-radius: 50%;
                box-shadow: 0 2px 4px rgba(0,0,0,0.3);
                margin-bottom: -2px;
            }

            /* 旗杆主体：拉丝黄铜质感 */
            .pole-body {
                width: 8px;
                height: 120px;
                background: linear-gradient(to right, 
                    #4d3d00 0%, 
                    #8b6914 15%, 
                    #ffd700 40%, 
                    #fff9e6 55%, 
                    #ffd700 70%, 
                    #8b6914 85%, 
                    #4d3d00 100%);
                border-radius: 0 0 4px 4px;
            }

            /* --- 旗帜逻辑 --- */
            .flag-wrapper {
                margin-left: 8px;
                width: 150px;
                height: 90px;
                perspective: 1200px;
            }

            .flag {
                width: 100%;
                height: 100%;
                position: relative;
                transform-style: preserve-3d;
                animation: cinematic-wave 6s infinite ease-in-out;
                transform-origin: left center;
            }

            .fabric {
                position: absolute;
                inset: 0;
                background: linear-gradient(to bottom, #0057B7 50%, #FFD700 50%);
                border-radius: 0 6px 6px 0;
                overflow: hidden;
                display: flex;
                align-items: center;
                justify-content: center;
                box-shadow: inset 2px 0 10px rgba(0,0,0,0.2);
            }

            .shading {
                position: absolute;
                inset: 0;
                background: linear-gradient(90deg, 
                    rgba(0,0,0,0.1) 0%, 
                    rgba(255,255,255,0.18) 25%, 
                    rgba(0,0,0,0.25) 50%, 
                    rgba(255,255,255,0.18) 75%, 
                    rgba(0,0,0,0.1) 100%);
                background-size: 200% 100%;
                animation: move-shade 4s infinite linear;
                mix-blend-mode: overlay;
            }

            .trident {
                width: 32px;
                z-index: 10;
                filter: drop-shadow(0 4px 6px rgba(0,0,0,0.3));
                transform: translateZ(5px);
            }

            /* --- 动态效果 --- */
            @keyframes cinematic-wave {
                0%, 100% { transform: rotateY(18deg) rotateX(4deg) rotateZ(-1deg); }
                33% { transform: rotateY(38deg) rotateX(-4deg) rotateZ(1.5deg); }
                66% { transform: rotateY(22deg) rotateX(8deg) rotateZ(-0.5deg); }
            }

            @keyframes move-shade {
                from { background-position: 0% 0; }
                to { background-position: 200% 0; }
            }
        </style>
        <div class="container">
            <div class="pole-system">
                <div class="pole-top"></div>
                <div class="pole-body"></div>
            </div>
            <div class="flag-wrapper">
                <div class="flag">
                    <div class="fabric">
                        <div class="shading"></div>
                        <img src="${tridentSvg}" class="trident" />
                    </div>
                </div>
            </div>
        </div>`;

        requestAnimationFrame(() => {
            host.style.opacity = '1';
            host.style.transform = 'translateX(0) scale(1)';
        });
    }

    window.addEventListener('keydown', (e) => {
        if (e.ctrlKey && e.shiftKey && e.code === 'KeyU') {
            const root = document.getElementById('ua-waving-badge-root');
            if (root) {
                root.style.opacity = '0';
                root.style.transform = 'translateX(-20px) scale(0.9)';
                setTimeout(() => { root.remove(); isTerminated = true; }, 800);
            } else {
                isTerminated = false;
                injectBadge();
            }
        }
    }, true);

    injectBadge();
    setInterval(() => { if(!isTerminated) injectBadge(); }, 3000);
})();