-
-
${CONFIG.PAINTING_SPEED.DEFAULT} (batch size)
+
+
+
+
${CONFIG.PAINTING_SPEED.DEFAULT} (batch size)
+
+
${CONFIG.PAINTING_SPEED.MIN}
@@ -3969,7 +3988,7 @@
}
}
- #speedSlider::-webkit-slider-thumb, #overlayOpacitySlider::-webkit-slider-thumb {
+ #speedSlider::-webkit-slider-thumb, #cooldownSlider::-webkit-slider-thumb, #overlayOpacitySlider::-webkit-slider-thumb {
-webkit-appearance: none;
width: 18px;
height: 18px;
@@ -3980,12 +3999,12 @@
transition: all 0.2s ease;
}
- #speedSlider::-webkit-slider-thumb:hover, #overlayOpacitySlider::-webkit-slider-thumb:hover {
+ #speedSlider::-webkit-slider-thumb:hover, #cooldownSlider::-webkit-slider-thumb:hover, #overlayOpacitySlider::-webkit-slider-thumb:hover {
transform: scale(1.2);
box-shadow: 0 4px 8px rgba(0,0,0,0.4), 0 0 0 3px #4facfe;
}
- #speedSlider::-moz-range-thumb, #overlayOpacitySlider::-moz-range-thumb {
+ #speedSlider::-moz-range-thumb, #cooldownSlider::-moz-range-thumb, #overlayOpacitySlider::-moz-range-thumb {
width: 18px;
height: 18px;
border-radius: 50%;
@@ -4032,6 +4051,173 @@
.wplace-settings-header:active {
background: rgba(255,255,255,0.2) !important;
}
+
+ /* Dual Control Layout - Ultra Compact for Neon */
+ .wplace-dual-control {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ gap: 8px;
+ margin: 2px 0;
+ flex-wrap: wrap;
+ }
+
+ .wplace-slider-container {
+ display: flex;
+ align-items: center;
+ gap: 4px;
+ flex: 1;
+ min-width: 140px;
+ }
+
+ .wplace-slider, .wplace-speed-slider {
+ flex: 1;
+ min-width: 80px;
+ height: 16px;
+ }
+
+ .wplace-cooldown-value, .wplace-speed-value {
+ min-width: 50px;
+ text-align: center;
+ font-weight: 500;
+ color: rgba(255,255,255,0.9);
+ font-size: 10px;
+ }
+
+ /* Input Group Styles - Ultra Compact */
+ .wplace-input-group {
+ display: flex;
+ align-items: center;
+ gap: 2px;
+ flex-shrink: 0;
+ }
+ margin: 8px 0;
+ }
+
+ .wplace-input-btn {
+ background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
+ color: white;
+ border: none;
+ border-radius: 2px;
+ width: 18px;
+ height: 18px;
+ cursor: pointer;
+ font-weight: bold;
+ font-size: 11px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ transition: all 0.2s ease;
+ box-shadow: 0 1px 2px rgba(0,0,0,0.2);
+ }
+ font-size: 12px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ transition: all 0.2s ease;
+ box-shadow: 0 1px 2px rgba(0,0,0,0.2);
+ }
+
+ .wplace-input-btn:hover {
+ transform: translateY(-1px);
+ box-shadow: 0 4px 8px rgba(0,0,0,0.3);
+ background: linear-gradient(135deg, #00f2fe 0%, #4facfe 100%);
+ }
+
+ .wplace-input-btn:active {
+ transform: translateY(0);
+ box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+ }
+
+ .wplace-number-input {
+ background: rgba(255,255,255,0.1);
+ border: 1px solid rgba(255,255,255,0.2);
+ border-radius: 2px;
+ color: white;
+ padding: 1px 4px;
+ font-size: 10px;
+ width: 40px;
+ text-align: center;
+ transition: all 0.2s ease;
+ height: 18px;
+ }
+
+ .wplace-number-input:focus {
+ outline: none;
+ border-color: #4facfe;
+ box-shadow: 0 0 0 3px rgba(79, 172, 254, 0.3);
+ background: rgba(255,255,255,0.15);
+ }
+
+ .wplace-input-value {
+ color: rgba(255,255,255,0.7);
+ font-size: 9px;
+ margin-left: 2px;
+ white-space: nowrap;
+ }
+
+ /* Neon Theme Specific Optimizations */
+ .wplace-theme-neon .wplace-dual-control {
+ gap: 4px;
+ margin: 1px 0;
+ }
+
+ .wplace-theme-neon .wplace-slider-container {
+ gap: 2px;
+ min-width: 120px;
+ }
+
+ .wplace-theme-neon .wplace-slider,
+ .wplace-theme-neon .wplace-speed-slider {
+ height: 14px;
+ min-width: 70px;
+ }
+
+ .wplace-theme-neon .wplace-input-btn {
+ width: 16px;
+ height: 16px;
+ font-size: 10px;
+ }
+
+ .wplace-theme-neon .wplace-number-input {
+ width: 35px;
+ height: 16px;
+ font-size: 9px;
+ padding: 0 3px;
+ }
+
+ .wplace-theme-neon .wplace-cooldown-value,
+ .wplace-theme-neon .wplace-speed-value {
+ font-size: 9px;
+ min-width: 40px;
+ }
+
+ .wplace-theme-neon .wplace-input-value {
+ font-size: 8px;
+ }
+
+ .wplace-speed-input-container {
+ margin: 2px 0;
+ }
+
+ /* Custom Scrollbar for Content Area */
+ .wplace-content::-webkit-scrollbar {
+ width: 6px;
+ }
+
+ .wplace-content::-webkit-scrollbar-track {
+ background: rgba(255,255,255,0.1);
+ border-radius: 3px;
+ }
+
+ .wplace-content::-webkit-scrollbar-thumb {
+ background: rgba(255,255,255,0.3);
+ border-radius: 3px;
+ }
+
+ .wplace-content::-webkit-scrollbar-thumb:hover {
+ background: rgba(255,255,255,0.5);
+ }
`;
@@ -4283,6 +4469,10 @@
const closeStatsBtn = statsContainer.querySelector('#closeStatsBtn');
const refreshChargesBtn = statsContainer.querySelector('#refreshChargesBtn');
const cooldownSlider = container.querySelector('#cooldownSlider');
+ const cooldownSliderValue = container.querySelector('#cooldownSliderValue');
+ const cooldownInput = container.querySelector('#cooldownInput');
+ const cooldownDecrease = container.querySelector('#cooldownDecrease');
+ const cooldownIncrease = container.querySelector('#cooldownIncrease');
const cooldownValue = container.querySelector('#cooldownValue');
if (!uploadBtn || !selectPosBtn || !startBtn || !stopBtn) {
@@ -4644,15 +4834,45 @@
});
}
- // Speed slider event listener
+ // Speed controls - both slider and input
const speedSlider = settingsContainer.querySelector('#speedSlider');
+ const speedSliderValue = settingsContainer.querySelector('#speedSliderValue');
+ const speedInput = settingsContainer.querySelector('#speedInput');
+ const speedDecrease = settingsContainer.querySelector('#speedDecrease');
+ const speedIncrease = settingsContainer.querySelector('#speedIncrease');
const speedValue = settingsContainer.querySelector('#speedValue');
- if (speedSlider && speedValue) {
- speedSlider.addEventListener('input', (e) => {
- const speed = parseInt(e.target.value, 10);
+
+ if (speedSlider && speedSliderValue && speedInput && speedValue && speedDecrease && speedIncrease) {
+ const updateSpeed = (newValue) => {
+ const speed = Math.max(CONFIG.PAINTING_SPEED.MIN, Math.min(CONFIG.PAINTING_SPEED.MAX, parseInt(newValue)));
state.paintingSpeed = speed;
- speedValue.textContent = `${speed} (batch size)`;
+
+ // Update both controls
+ speedSlider.value = speed;
+ speedInput.value = speed;
+ speedSliderValue.textContent = `${speed} (batch size)`;
+
saveBotSettings();
+ };
+
+ // Slider event listener
+ speedSlider.addEventListener('input', (e) => {
+ updateSpeed(e.target.value);
+ });
+
+ // Number input event listener
+ speedInput.addEventListener('input', (e) => {
+ updateSpeed(e.target.value);
+ });
+
+ // Decrease button
+ speedDecrease.addEventListener('click', () => {
+ updateSpeed(parseInt(speedInput.value) - 1);
+ });
+
+ // Increase button
+ speedIncrease.addEventListener('click', () => {
+ updateSpeed(parseInt(speedInput.value) + 1);
});
}
@@ -5094,9 +5314,12 @@
intervalMs
);
- if (cooldownSlider.max !== state.maxCharges) {
+ if (cooldownSlider && cooldownSlider.max !== state.maxCharges) {
cooldownSlider.max = state.maxCharges;
}
+ if (cooldownInput && cooldownInput.max !== state.maxCharges) {
+ cooldownInput.max = state.maxCharges;
+ }
let imageStatsHTML = '';
if (state.imageLoaded) {
@@ -6582,13 +6805,38 @@
setTimeout(checkSavedProgress, 1000);
- if (cooldownSlider && cooldownValue) {
- cooldownSlider.addEventListener('input', (e) => {
- const threshold = parseInt(e.target.value);
+ if (cooldownSlider && cooldownSliderValue && cooldownInput && cooldownValue && cooldownDecrease && cooldownIncrease) {
+ const updateCooldown = (newValue) => {
+ const threshold = Math.max(1, Math.min(state.maxCharges || 999, parseInt(newValue)));
state.cooldownChargeThreshold = threshold;
- cooldownValue.textContent = threshold;
+
+ // Update both controls
+ cooldownSlider.value = threshold;
+ cooldownInput.value = threshold;
+ cooldownSliderValue.textContent = threshold;
+
saveBotSettings();
NotificationManager.resetEdgeTracking(); // prevent spurious notify after threshold change
+ };
+
+ // Slider event listener
+ cooldownSlider.addEventListener('input', (e) => {
+ updateCooldown(e.target.value);
+ });
+
+ // Number input event listener
+ cooldownInput.addEventListener('input', (e) => {
+ updateCooldown(e.target.value);
+ });
+
+ // Decrease button
+ cooldownDecrease.addEventListener('click', () => {
+ updateCooldown(parseInt(cooldownInput.value) - 1);
+ });
+
+ // Increase button
+ cooldownIncrease.addEventListener('click', () => {
+ updateCooldown(parseInt(cooldownInput.value) + 1);
});
}
@@ -7473,9 +7721,13 @@
}
const speedSlider = document.getElementById('speedSlider');
+ const speedInput = document.getElementById('speedInput');
+ const speedSliderValue = document.getElementById('speedSliderValue');
if (speedSlider) speedSlider.value = state.paintingSpeed;
+ if (speedInput) speedInput.value = state.paintingSpeed;
+ if (speedSliderValue) speedSliderValue.textContent = `${state.paintingSpeed} (batch size)`;
const speedValue = document.getElementById('speedValue');
- if (speedValue) speedValue.textContent = `${state.paintingSpeed} (batch size)`;
+ if (speedValue) speedValue.textContent = Utils.t('batchSize');
const enableSpeedToggle = document.getElementById('enableSpeedToggle');
if (enableSpeedToggle) enableSpeedToggle.checked = CONFIG.PAINTING_SPEED_ENABLED;
@@ -7507,9 +7759,13 @@
// AUTO_CAPTCHA_ENABLED is always true - no toggle to set
const cooldownSlider = document.getElementById('cooldownSlider');
+ const cooldownInput = document.getElementById('cooldownInput');
+ const cooldownSliderValue = document.getElementById('cooldownSliderValue');
if (cooldownSlider) cooldownSlider.value = state.cooldownChargeThreshold;
+ if (cooldownInput) cooldownInput.value = state.cooldownChargeThreshold;
+ if (cooldownSliderValue) cooldownSliderValue.textContent = state.cooldownChargeThreshold;
const cooldownValue = document.getElementById('cooldownValue');
- if (cooldownValue) cooldownValue.textContent = state.cooldownChargeThreshold;
+ if (cooldownValue) cooldownValue.textContent = Utils.t('charges');
const overlayOpacitySlider = document.getElementById('overlayOpacitySlider');
if (overlayOpacitySlider) overlayOpacitySlider.value = state.overlayOpacity;