Ctrl+Shift+U control Show/Hide.
// ==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);
})();