From c1506a4d1e251598e1b85bcd360d4e2ebce9dfac Mon Sep 17 00:00:00 2001
From: juanatsap <juanatsap@gmail.com>
Date: Wed, 12 Nov 2025 11:46:19 +0000
Subject: [PATCH] feat: smooth analog zoom with solid blue hover

UX improvements for more responsive, fluid zoom experience:

1. Smooth analog response:
   - Removed 50ms debounce - applies zoom immediately
   - Changed step from 5 to 1 for ultra-smooth increments
   - Updated transition: 0.08s linear (was 0.3s cubic-bezier)
   - Real-time transform updates for analog feel vs digital jumps

2. Solid blue hover (no gradient):
   - Changed from multi-color gradient to solid #3b82f6 blue
   - Maintains gray when not hovering
   - Clean, simple visual feedback matching reference design

3. Visual enhancement:
   - Keyboard shortcuts now use step 10 for faster adjustments
   - Instant response eliminates "digital" feeling
   - Smooth, continuous zoom matching analog controls

Technical changes:
- HTML: step="1" instead of step="5"
- CSS: solid color hover, 0.08s linear transition
- JS: removed debounce timeout, immediate applyZoom()
---
 static/css/main.css  | 20 +++++---------------
 static/js/main.js    | 16 +++++-----------
 templates/index.html |  2 +-
 3 files changed, 11 insertions(+), 27 deletions(-)

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"