Customize the PixelPlanet interface with extended personalization options and revert to default.
当前为
// ==UserScript==
// @name Pixelplanet+
// @namespace http://tampermonkey.net/
// @version 3
// @author Pixel, join dsc.gg/turkmenlippf
// @description Customize the PixelPlanet interface with extended personalization options and revert to default.
// @match https://pixelplanet.fun/*
// @grant GM_addStyle
// @icon https://cdn.discordapp.com/attachments/1295091021016862782/1305807684657876992/image.png?ex=67345fac&is=67330e2c&hm=f8dac6f7693c5f04b3e07bcb82e41885ec1bfdae62ae0a39da2739452dcdeff3&
// ==/UserScript==
(function() {
'use strict';
// Import Google Fonts
GM_addStyle(`@import url('https://fonts.googleapis.com/css2?family=Pixelify+Sans&display=swap');`);
// Define improved default styles
const defaultCSS = `
body {
margin: 0;
font-family: 'Montserrat', sans-serif;
font-size: 16px;
background: #c4c4c4;
}
.menu > div { background-color: transparent !important; }
`;
// Load styles and settings on page load
applyStoredStyles();
addCustomizationButton();
// Apply stored styles from localStorage
function applyStoredStyles() {
const settings = {
buttonColor: getStoredValue('buttonColor', '#4CAF50'),
buttonHoverColor: getStoredValue('buttonHoverColor', '#ff91a6'),
fontColor: getStoredValue('fontColor', '#000000'),
fontSize: getStoredValue('fontSize', '16'),
fontFamily: getStoredValue('fontFamily', 'Arial'),
menuColor: getStoredValue('menuColor', '#ffffff'),
backgroundOpacity: getStoredValue('backgroundOpacity', '1'),
backgroundImage: getStoredValue('backgroundImage', '')
};
applyCustomStyles(settings);
}
// Reset styles
function resetToDefaultStyles() {
localStorage.clear();
GM_addStyle(defaultCSS);
applyStoredStyles();
}
// Get and set storage functions
function getStoredValue(key, defaultValue) {
return localStorage.getItem(key) || defaultValue;
}
function setStoredValue(key, value) {
localStorage.setItem(key, value);
}
// Apply customization styles to specified elements
function applyCustomStyles({ buttonColor, buttonHoverColor, fontColor, fontSize, fontFamily, menuColor, backgroundOpacity, backgroundImage }) {
GM_addStyle(`
body {
background-color: rgba(255, 255, 255, ${backgroundOpacity});
background-image: url(${backgroundImage});
font-size: ${fontSize}px;
font-family: ${fontFamily};
color: ${fontColor};
}
/* Apply colors to buttons and other elements */
.actionbuttons, .actionbuttons button,
.coorbox, .onlinebox, .cooldownbox, #palettebox {
background-color: ${buttonColor} !important;
color: white !important;
}
.actionbuttons:hover, .actionbuttons button:hover,
.coorbox:hover, .onlinebox:hover, .cooldownbox:hover, #palettebox:hover {
background-color: ${buttonHoverColor} !important;
}
/* Apply colors to modals and menus with the customMenu class */
.customMenu, .modal.USERAREA.show, .modal.HELP.show, .modal.SETTINGS.show {
background-color: ${menuColor} !important;
color: ${fontColor};
border-radius: 10px;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}
`);
}
// Create customization button
function addCustomizationButton() {
const customizationButton = document.createElement('div');
customizationButton.id = 'customizationButton';
customizationButton.className = 'actionbuttons';
customizationButton.setAttribute('role', 'button');
customizationButton.innerHTML = `
<svg stroke="currentColor" fill="currentColor" viewBox="0 0 24 24" height="1em" width="1em">
<circle cx="12" cy="12" r="10" style="fill: #FFC107;" />
<text x="12" y="16" text-anchor="middle" fill="white" font-size="10">K</text>
</svg>`;
customizationButton.style.position = 'fixed';
customizationButton.style.left = '16px';
customizationButton.style.top = '37%';
customizationButton.style.zIndex = '9999';
customizationButton.style.transform = 'translateY(-50%)';
document.body.appendChild(customizationButton);
customizationButton.addEventListener('click', showCustomizationPanel);
}
// Show customization panel with improved styling and new options
function showCustomizationPanel() {
const panelHTML = `
<div class="modal SETTINGS show customMenu" style="
z-index: 9999;
width: 50%;
max-width: 500px;
max-height: 80vh;
overflow-y: auto;
padding: 20px;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #ffffff;
border: 1px solid #ccc;
border-radius: 12px;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
transition: all 0.3s ease;
font-family: 'Pixelify Sans', sans-serif;
">
<h2 style="text-align: center; font-size: 1.4em; margin-bottom: 1em;">Settings</h2>
<div class="modal-topbtn close" role="button" title="Close" tabindex="-1" style="
position: absolute;
top: 10px;
right: 10px;
font-size: 1.2em;
cursor: pointer;
">✕</div>
<div class="content" style="display: flex; flex-direction: column; gap: 15px;">
<div class="setitem">
<label>Button Color:</label>
<input type="color" id="buttonColorPicker" value="${getStoredValue('buttonColor', '#4CAF50')}" />
</div>
<div class="setitem">
<label>Button Hover Color:</label>
<input type="color" id="buttonHoverColorPicker" value="${getStoredValue('buttonHoverColor', '#ff91a6')}" />
</div>
<div class="setitem">
<label>Font Color:</label>
<input type="color" id="fontColorPicker" value="${getStoredValue('fontColor', '#000000')}" />
</div>
<div class="setitem">
<label>Font Size:</label>
<input type="number" id="fontSizePicker" min="10" max="30" value="${getStoredValue('fontSize', '16')}" style="width: 80px;" /> px
</div>
<div class="setitem">
<label>Font Family:</label>
<select id="fontFamilyPicker" style="padding: 5px; border-radius: 5px;">
<option value="Arial" ${getStoredValue('fontFamily', 'Arial') === 'Arial' ? 'selected' : ''}>Arial</option>
<option value="Verdana" ${getStoredValue('fontFamily', 'Arial') === 'Verdana' ? 'selected' : ''}>Verdana</option>
<option value="Helvetica" ${getStoredValue('fontFamily', 'Arial') === 'Helvetica' ? 'selected' : ''}>Helvetica</option>
<option value="Tahoma" ${getStoredValue('fontFamily', 'Arial') === 'Tahoma' ? 'selected' : ''}>Tahoma</option>
<option value="Pixelify Sans" ${getStoredValue('fontFamily', 'Arial') === 'Pixelify Sans' ? 'selected' : ''}>Pixelify Sans</option>
</select>
</div>
<div class="setitem">
<label>Menu Color:</label>
<input type="color" id="menuColorPicker" value="${getStoredValue('menuColor', '#ffffff')}" />
</div>
<div class="setitem">
<label>Background Opacity:</label>
<input type="range" id="backgroundOpacity" min="0.1" max="1" step="0.1" value="${getStoredValue('backgroundOpacity', '1')}" />
</div>
<div class="setitem">
<label>Background Image URL:</label>
<input type="text" id="backgroundImage" value="${getStoredValue('backgroundImage', '')}" style="width: 100%; padding: 5px;" />
</div>
<div style="display: flex; justify-content: space-between; margin-top: 1em;">
<button id="saveCustomization" style="flex: 1; margin-right: 5px; padding: 10px; background-color: #4CAF50; color: white; border: none; border-radius: 5px; cursor: pointer; transition: background-color 0.3s;">Save</button>
<button id="resetCustomization" style="flex: 1; margin-left: 5px; padding: 10px; background-color: #f44336; color: white; border: none; border-radius: 5px; cursor: pointer; transition: background-color 0.3s;">Reset</button>
</div>
</div>
</div>`;
document.body.insertAdjacentHTML('beforeend', panelHTML);
document.getElementById('saveCustomization').addEventListener('click', saveCustomization);
document.getElementById('resetCustomization').addEventListener('click', resetToDefaultStyles);
document.querySelector('.close').addEventListener('click', hideCustomizationPanel);
}
// Save settings
function saveCustomization() {
setStoredValue('buttonColor', document.getElementById('buttonColorPicker').value);
setStoredValue('buttonHoverColor', document.getElementById('buttonHoverColorPicker').value);
setStoredValue('fontColor', document.getElementById('fontColorPicker').value);
setStoredValue('fontSize', document.getElementById('fontSizePicker').value);
setStoredValue('fontFamily', document.getElementById('fontFamilyPicker').value);
setStoredValue('menuColor', document.getElementById('menuColorPicker').value);
setStoredValue('backgroundOpacity', document.getElementById('backgroundOpacity').value);
setStoredValue('backgroundImage', document.getElementById('backgroundImage').value);
applyStoredStyles();
}
// Hide panel
function hideCustomizationPanel() {
const panel = document.querySelector('.modal');
if (panel) { panel.remove(); }
}
})();