GeoGuessr customizer, personalize the background and font styles with gradients, transparency, and modern UI features. Enjoy a sleek, ultra-modern design with full control over colors, angles, and themes – including a live preview, random color selection, and a reset function. Elevate your GeoGuessr experience with this stylish customization tool!" 🚀🎨
当前为
// ==UserScript==
// @name GeoGuessr Customizer
// @namespace yournamespace
// @version 1.3
// @description GeoGuessr customizer, personalize the background and font styles with gradients, transparency, and modern UI features. Enjoy a sleek, ultra-modern design with full control over colors, angles, and themes – including a live preview, random color selection, and a reset function. Elevate your GeoGuessr experience with this stylish customization tool!" 🚀🎨
// @author Monazehra
// @match *://*.geoguessr.com/*
// @license MIT
// @grant GM_addStyle
// @grant GM_setValue
// @grant GM_getValue
// ==/UserScript==
(function () {
'use strict';
let color1 = GM_getValue("gradientColor1", "#AFFCAF");
let color2 = GM_getValue("gradientColor2", "#12DFF3");
let angle = GM_getValue("gradientAngle", "90deg");
let gradientType = GM_getValue("gradientType", "linear");
let selectedFont = GM_getValue("selectedFont", "Montserrat");
const availableFonts = [
"Montserrat", "Poppins", "Roboto", "Oswald", "Playfair Display",
"Lora", "Raleway", "Work Sans", "Libre Baskerville", "Butler",
"Merriweather", "Bebas Neue", "Pacifico", "Fira Sans", "Caveat",
"Abril Fatface", "Josefin Sans", "Lobster", "Titillium Web", "Dancing Script",
"Zilla Slab", "Anton", "Amatic SC", "Quicksand", "Bungee",
"IBM Plex Sans", "Cormorant Garamond", "Manrope", "Exo", "Arvo"
];
const getRandomColor = () => `#${Math.floor(Math.random() * 16777215).toString(16)}`;
const applyGradient = () => {
let gradient = gradientType === "Linear"
? `linear-gradient(${angle}, ${color1}, ${color2})`
: gradientType === "Radial"
? `radial-gradient(circle, ${color1}, ${color2})`
: `conic-gradient(from ${angle}, ${color1}, ${color2})`;
GM_addStyle(`
body, [class*='background_'], [class*='startpage_background__'], [class*='background_wrapper__'], [class*='game_backdrop__'], [class*='game_layout__'],[class*='styles_root__MEUCG'],
.game-page, .startpage_newWrapper__IArnC, .challenge-page, .result-page, .game-summary-page,
.game-layout, .map-page, .lobby-page {
background: ${gradient} !important;
background-attachment: fixed !important;
transition: background 0.5s ease-in-out;
}
#gradientPreview {
background: ${gradient} !important;
}
`);
};
const applyFont = () => {
GM_addStyle(`
@import url('https://fonts.googleapis.com/css2?family=${selectedFont.replace(/ /g, "+")}&display=swap');
* {
font-family: '${selectedFont}', sans-serif !important;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6 {
font-weight: bold !important;
color: #fff !important;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
p, span, div {
font-weight: 500 !important;
color: #e0e0e0 !important;
}
`);
};
const createSidebar = () => {
const sidebar = document.createElement("div");
sidebar.id = "geoSidebar";
sidebar.style = `
position: fixed;
top: 25%;
left: -500px;
width: 300px;
height: 45vh;
background: rgba(0, 0, 0, 0.8);
color: #fff;
padding: 20px;
border-right: 3px solid #ff6b81;
box-shadow: 4px 0px 15px rgba(0, 0, 0, 0.5);
transition: left 0.3s ease-in-out;
z-index: 1000;
display: flex;
flex-direction: column;
backdrop-filter: blur(12px);
border-radius: 0 12px 12px 0;
`;
const closeButton = document.createElement("button");
closeButton.innerText = "✖";
closeButton.style = `
position: absolute;
top: 10px;
right: 15px;
background: none;
border: none;
color: #ff6b81;
font-size: 1.5em;
cursor: pointer;
`;
closeButton.addEventListener("click", () => {
sidebar.style.left = "-500px";
});
const title = document.createElement("h2");
title.innerText = "GeoCustomizer";
title.style = "text-align: center; color: #ff6b81; font-size: 1.8em;";
sidebar.appendChild(closeButton);
sidebar.appendChild(title);
const madeby = document.createElement("h4");
madeby.innerText = "Made by @Monazehra";
madeby.style = "text-align: center; color:#565353; margin-bottom: 30px; font-size: 0.7em;";
sidebar.appendChild(madeby);
const createDropdown = (labelText, options, selectedValue, onChange) => {
const label = document.createElement("label");
label.innerText = labelText;
sidebar.appendChild(label);
const select = document.createElement("select");
select.style = "width: 100%; margin-bottom: 10px; padding: 8px; font-size: 1.1em; border-radius: 8px;";
options.forEach(option => {
const opt = document.createElement("option");
opt.value = option;
opt.innerText = option;
select.appendChild(opt);
});
select.value = selectedValue;
select.addEventListener("change", (e) => {
onChange(e.target.value);
});
sidebar.appendChild(select);
};
createDropdown("Gradient Type:", ["Linear", "Radial", "Conic"], gradientType, (val) => {
gradientType = val;
GM_setValue("gradientType", gradientType);
applyGradient();
});
createDropdown("Font Style:", availableFonts, selectedFont, (val) => {
selectedFont = val;
GM_setValue("selectedFont", selectedFont);
applyFont();
});
const createColorPicker = (labelText, colorValue, setColorCallback) => {
const label = document.createElement("label");
label.innerText = labelText;
sidebar.appendChild(label);
const input = document.createElement("input");
input.type = "color";
input.value = colorValue;
input.style = "width: 100%; margin-bottom: 10px; border-radius: 7px;";
input.addEventListener("input", (e) => {
setColorCallback(e.target.value);
applyGradient();
});
sidebar.appendChild(input);
};
createColorPicker("Start Color:", color1, (val) => { color1 = val; GM_setValue("gradientColor1", color1); });
createColorPicker("End Color:", color2, (val) => { color2 = val; GM_setValue("gradientColor2", color2); });
const previewBox = document.createElement("div");
previewBox.id = "gradientPreview";
previewBox.style = "width: 100%; height: 150px; border-radius: 12px; margin-bottom: 15px; border: 2px solid #ff6b81;";
sidebar.appendChild(previewBox);
const randomButton = document.createElement("button");
randomButton.innerText = "🎨 Random Color";
randomButton.style = `
margin: 10px;
padding: 15px 30px;
text-align: center;
text-transform: uppercase;
transition: 0.5s;
background-size: 200% auto;
color: white;
box-shadow: 0 0 20px #eee;
border-radius: 50px;
display: block;
`;
randomButton.addEventListener("click", () => {
color1 = getRandomColor();
color2 = getRandomColor();
GM_setValue("gradientColor1", color1);
GM_setValue("gradientColor2", color2);
applyGradient();
});
sidebar.appendChild(randomButton);
document.body.appendChild(sidebar);
const toggleButton = document.createElement("button");
toggleButton.id = "geoSidebarToggle";
toggleButton.innerText = "⚙️";
toggleButton.style = `
position: fixed;
bottom: 20px;
left: 10px;
width: 50px;
height: 50px;
color: white;
border-radius: 50%;
font-size: 1.5em;
cursor: pointer;
transition: left 0.3s ease-in-out;
`;
toggleButton.addEventListener("click", () => {
sidebar.style.left = sidebar.style.left === "0px" ? "-400px" : "0px";
});
document.body.appendChild(toggleButton);
};
applyGradient();
applyFont();
createSidebar();
})();