Custom Nitro Type Theme w/ Font-Size and Height Sliders
目前为
// ==UserScript==
// @name Nitro Monkey | NT Theme
// @namespace https://gf.qytechs.cn/users/1331131-tensorflow-dvorak
// @version 2024-10-17
// @description Custom Nitro Type Theme w/ Font-Size and Height Sliders
// @author TensorFlow - Dvorak
// @match *://*.nitrotype.com/race
// @match *://*.nitrotype.com/race/*
// @license MIT
// @grant none
// ==/UserScript==
(function () {
const dynamicStyle = document.createElement("style");
document.head.appendChild(dynamicStyle);
function updateFontSizeRule(fontSize) {
dynamicStyle.innerHTML = `
#root {
background-color: #060516;
}
.dash-copy {
font-size: ${fontSize}px !important;
}
.dash-copyContainer {
background: linear-gradient(to bottom, rgba(6, 5, 22, 0.9) 65%, rgba(6, 5, 22, 0.87) 70%, #060516 100%);
border-radius: 5px;
box-shadow: 0 1px 10px rgba(2, 2, 2, 0.14);
flex: 1;
overflow: hidden;
padding: 15px;
width: 100%;
display: flex;
}
.dash-side, .dash-actions, .dash-nitros {
display: none;
}
.dash:before {
height: min-content;
}
.typing-cursor {
display: inline-block;
width: 2px;
height: 1.2em;
background-color: #00FF7F;
animation: blink 1s step-end infinite;
position: absolute;
transition: all 0.01s ease-in-out;
}
@keyframes blink {
50% { opacity: 0; }
}
.dash-letter {
position: relative;
display: inline-block;
transition: color 0.01s ease-in-out, transform 0.01s ease-in-out;
color: #acaaff;
}
.is-typed {
color: #00FF7F;
transition: color 0.01s ease-in-out;
}
.is-incorrect {
color: red;
}
.dash-letter.is-incorrect {
background: #1c99f400;
color: red;
}
.dash-letter.is-waiting {
color: #acaaff;
background-color: #1c99f400;
}
.structure-footer {
display: flex;
padding-top: 2rem;
}
.race-results {
background-color: #060516;
}
.raceResults--default {
background: #060516;
}
.raceResults-rewards {
background: #0c0b18;
}
.raceResults-dailyChallenges {
background: #0c0b18;
}
.g-b--7of12 {
background: #060516;
}
.footer-nav {
background: #0c0b18;
}
.nav-list {
background: #0c0b18;
}
.nav {
background: #0c0b18;
border-bottom: 1px solid #14141b;
}
.btn--primary {
background: #403dae;
}
.btn--primary:hover {
background: #8a1bdf;
}
.btn--secondary {
background: #5b048a;
}
.btn--secondary:hover {
background: #8d11d0;
}
.gridTable--raceResults .gridTable-cell {
background: #0c0b18;
}
.gridTable-cell {
background: #0c0b18;
}
.dashShield-layer {
display: none;
}
.dash-center {
background: #060516;
}
.nt-stats-right-section {
background: #060516;
}
.nt-stats-daily-challenges {
background: #060516;
}
.nt-stats-body {
background: #0c0b18;
}
#targetWPM {
appearance: none;
background: rgba(6, 5, 22, 0.9);
color: #6864f6;
border: 1px solid #6a66fa;
border-radius: 4px;
padding: 5px;
text-align: center;
width: 80px;
outline: none;
font-family: inherit;
}
#targetWPM:focus {
box-shadow: 0 0 5px rgba(0, 255, 127, 0.5);
border-color: #00FF7F;
}
#increaseWPM, #decreaseWPM {
background-color: #6a66fa;
color: white;
border: none;
border-radius: 4px;
padding: 5px 10px;
font-size: 16px;
cursor: pointer;
}
#increaseWPM:hover, #decreaseWPM:hover {
background-color: white;
}
`;
}
const dashElement = document.querySelector(".dash");
const container = document.querySelector(".structure-content div");
if (dashElement) {
const displayContainer = document.createElement("div");
displayContainer.style.display = "flex";
displayContainer.style.gap = "2rem";
displayContainer.style.marginTop = "10px";
displayContainer.style.fontSize = "20px";
displayContainer.style.color = "#6864f6";
displayContainer.style.background = "rgba(6, 5, 22, 0.8)";
displayContainer.style.padding = "10px";
displayContainer.style.borderRadius = "5px";
displayContainer.style.zIndex = "9999";
displayContainer.innerHTML = `
<div>WPM: 0 <span id="targetWPMValue" style="margin-left: 10px;">Target WPM: 100</span></div>
<div>
<label for="targetWPM" style="margin-right: 10px;">Target WPM:</label>
<button id="decreaseWPM" style="margin-right: 5px;">-</button>
<input type="number" id="targetWPM" min="50" max="200" value="100" readonly>
<button id="increaseWPM" style="margin-left: 5px;">+</button>
</div>
<div>Accuracy: 0%</div>
`;
container.appendChild(displayContainer);
const wpmDisplay = displayContainer.querySelector("div:nth-child(1)");
const targetWPMValueDisplay =
displayContainer.querySelector("#targetWPMValue");
const accuracyDisplay = displayContainer.querySelector("div:nth-child(3)");
const targetWPMInput = displayContainer.querySelector("#targetWPM");
const increaseWPMButton = displayContainer.querySelector("#increaseWPM");
const decreaseWPMButton = displayContainer.querySelector("#decreaseWPM");
const savedTargetWPM = localStorage.getItem("targetWPM") || "100";
targetWPMInput.value = savedTargetWPM;
targetWPMValueDisplay.textContent = `Target WPM: ${savedTargetWPM}`;
function updateTargetWPM(value) {
const targetWPM = Math.max(50, Math.min(200, parseInt(value, 10)));
targetWPMInput.value = targetWPM;
targetWPMValueDisplay.textContent = `Target WPM: ${targetWPM}`;
localStorage.setItem("targetWPM", targetWPM);
}
increaseWPMButton.addEventListener("click", function () {
updateTargetWPM(parseInt(targetWPMInput.value, 10) + 5);
});
decreaseWPMButton.addEventListener("click", function () {
updateTargetWPM(parseInt(targetWPMInput.value, 10) - 5);
});
const fetchStats = () => {
const wpmElement = document.querySelector(
".dash-metrics .list-item:nth-child(1) .g-b--8of12 .h4"
);
const accuracyElement = document.querySelector(
".dash-metrics .list-item:nth-child(2) .g-b--8of12 .h4"
);
const targetWPM = parseInt(localStorage.getItem("targetWPM"), 10) || 100;
const green = "#00FF7F";
const yellow = "#FFD700";
const red = "red";
if (wpmElement) {
const wpmValue = parseInt(wpmElement.textContent, 10) || 0;
if (wpmValue >= targetWPM - 10 && wpmValue <= targetWPM + 10) {
wpmDisplay.style.color = green;
} else if (wpmValue < targetWPM - 20) {
wpmDisplay.style.color = red;
} else if (wpmValue < targetWPM - 10) {
wpmDisplay.style.color = yellow;
} else if (wpmValue > targetWPM + 10) {
wpmDisplay.style.color = "blue";
}
wpmDisplay.innerHTML = `WPM: ${wpmValue} <span id="targetWPMValue" style="margin-left: 10px;">Target WPM: ${targetWPM}</span>`;
}
if (accuracyElement && accuracyDisplay) {
const accuracyValue = parseFloat(accuracyElement.textContent) || 0;
if (accuracyValue < 94) {
accuracyDisplay.style.color = red;
} else if (accuracyValue >= 94 && accuracyValue < 96) {
accuracyDisplay.style.color = yellow;
} else {
accuracyDisplay.style.color = green;
}
accuracyDisplay.textContent = `Accuracy: ${accuracyValue}%`;
}
};
// Height slider
const heightLabel = document.createElement("label");
heightLabel.textContent = "Adjust Height:";
heightLabel.style.color = "#00FF7F";
heightLabel.style.display = "block";
heightLabel.style.marginTop = "10px";
const heightSlider = document.createElement("input");
heightSlider.type = "range";
heightSlider.min = "100";
heightSlider.max = "1000";
const savedHeight = localStorage.getItem("dashHeight") || "500";
dashElement.style.height = `${savedHeight}px`;
heightSlider.value = savedHeight;
heightSlider.style.width = "100%";
heightSlider.style.marginTop = "5px";
heightSlider.style.cursor = "pointer";
container.appendChild(heightLabel);
container.appendChild(heightSlider);
heightSlider.addEventListener("input", function () {
const heightValue = heightSlider.value;
dashElement.style.height = `${heightValue}px`;
localStorage.setItem("dashHeight", heightValue);
});
// Font size slider
const fontSizeLabel = document.createElement("label");
fontSizeLabel.textContent = "Adjust Font Size:";
fontSizeLabel.style.color = "#00FF7F";
fontSizeLabel.style.display = "block";
fontSizeLabel.style.marginTop = "10px";
const fontSizeSlider = document.createElement("input");
fontSizeSlider.type = "range";
fontSizeSlider.min = "20";
fontSizeSlider.max = "80";
fontSizeSlider.value = localStorage.getItem("dashFontSize") || "40";
fontSizeSlider.style.width = "100%";
fontSizeSlider.style.marginTop = "5px";
fontSizeSlider.style.cursor = "pointer";
container.appendChild(fontSizeLabel);
container.appendChild(fontSizeSlider);
updateFontSizeRule(fontSizeSlider.value);
fontSizeSlider.addEventListener("input", function () {
const newFontSize = fontSizeSlider.value;
updateFontSizeRule(newFontSize);
localStorage.setItem("dashFontSize", newFontSize);
});
setInterval(fetchStats, 100);
}
})();
QingJ © 2025
镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址