diff --git a/static/css/main.css b/static/css/main.css index b646d7f..d79fcdd 100644 --- a/static/css/main.css +++ b/static/css/main.css @@ -552,7 +552,7 @@ iconify-icon { /* Zoom transform properties */ transform-origin: top center; /* Scale from top-center to maintain header alignment */ - transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* Smooth material-design easing */ + transition: transform 0.08s linear; /* Immediate, smooth analog response */ will-change: transform; /* Hint browser to optimize for transforms */ } @@ -3521,15 +3521,10 @@ html { transition: all 0.3s ease; } -/* Colorful gradient on hover */ +/* Solid blue color on hover - no gradient */ .zoom-control:hover .zoom-slider, .zoom-slider:hover { - background: linear-gradient(to right, - #ef4444 0%, /* red */ - #f97316 25%, /* orange */ - #3b82f6 50%, /* blue */ - #22c55e 100% /* green */ - ); + background: #3b82f6; /* solid blue */ } .zoom-slider:focus { @@ -3591,15 +3586,10 @@ html { transition: all 0.3s ease; } -/* Firefox Range Track - Colorful on hover */ +/* Firefox Range Track - Solid blue on hover */ .zoom-control:hover .zoom-slider::-moz-range-track, .zoom-slider:hover::-moz-range-track { - background: linear-gradient(to right, - #ef4444 0%, /* red */ - #f97316 25%, /* orange */ - #3b82f6 50%, /* blue */ - #22c55e 100% /* green */ - ); + background: #3b82f6; /* solid blue */ } /* Reset Button - Circular with dynamic value inside */ diff --git a/static/js/main.js b/static/js/main.js index 1a4a72d..213201e 100644 --- a/static/js/main.js +++ b/static/js/main.js @@ -277,19 +277,13 @@ applyZoom(zoomValue, false); // false = don't save (already loaded from storage) } - // Real-time slider updates with debouncing for performance - let zoomTimeout; + // Real-time slider updates - immediate, smooth analog experience slider.addEventListener('input', function(e) { const zoomValue = parseInt(e.target.value, 10); - // Update ARIA and display immediately (no debounce) + // Apply zoom and update display immediately for smooth analog feel updateZoomDisplay(zoomValue); - - // Debounce the actual transform application (smoother on slower devices) - clearTimeout(zoomTimeout); - zoomTimeout = setTimeout(() => { - applyZoom(zoomValue, true); - }, 50); // 50ms debounce + applyZoom(zoomValue, true); }); // Reset button @@ -306,10 +300,10 @@ if ((e.ctrlKey || e.metaKey) && !e.shiftKey) { if (e.key === '=' || e.key === '+') { e.preventDefault(); - incrementZoom(5); + incrementZoom(10); } else if (e.key === '-') { e.preventDefault(); - incrementZoom(-5); + incrementZoom(-10); } else if (e.key === '0') { e.preventDefault(); slider.value = 100; diff --git a/templates/index.html b/templates/index.html index 7f0c543..12bf383 100644 --- a/templates/index.html +++ b/templates/index.html @@ -464,7 +464,7 @@ class="zoom-slider" min="50" max="200" - step="5" + step="1" value="100" aria-label="{{if eq .Lang "es"}}Ajustar nivel de zoom del CV{{else}}Adjust CV zoom level{{end}}" aria-valuemin="50"