feat: add zoom control with accessibility and persistence

UI Components:
- Fixed bottom-center zoom slider (50%-200% range, step 5%)
- Modern glass-morphism design with gradient slider track
- Reset button with smooth rotation animation
- Real-time zoom percentage display
- Fully responsive (desktop/tablet/mobile)

Functionality:
- CSS transform-based zoom (GPU accelerated)
- localStorage persistence across sessions
- Keyboard shortcuts: Ctrl/Cmd +/-/0
- Smooth transitions with debouncing (50ms)
- Scroll position preservation during zoom
- Print mode: Temporarily resets to 100%

Accessibility (WCAG AA):
- Complete ARIA labels and live regions
- Keyboard navigation support
- Focus indicators on all interactive elements
- Screen reader compatible (announces zoom level)
- Touch-friendly (44px+ targets)

Integration:
- Follows existing toggle patterns (length, logos, theme)
- Initializes in initPreferences()
- Works with print-friendly mode
- Hidden in print (.no-print class)
- Bilingual support (English/Spanish)

Performance:
- will-change: transform for compositor layer
- Debounced slider input for smooth dragging
- requestAnimationFrame for scroll preservation
- No layout thrashing (transform-only changes)

Technical Details:
- Range: 50-200 (prevents unusability, allows 2x mag)
- Transform origin: top center (maintains alignment)
- Transition: 300ms cubic-bezier (material design)
- Storage key: 'cv-zoom'
- Default: 100% (normal view)
This commit is contained in:
juanatsap
2025-11-12 11:00:29 +00:00
parent 7892c9fb8a
commit 93b471b7e3
3 changed files with 472 additions and 0 deletions
+43
View File
@@ -454,6 +454,49 @@
</div>
</div>
<!-- Zoom Control (Fixed Bottom Center) -->
<div id="zoom-control" class="zoom-control no-print" role="group" aria-label="{{if eq .Lang "es"}}Control de zoom{{else}}Zoom control{{end}}">
<label for="zoom-slider" class="zoom-label">
<iconify-icon icon="mdi:magnify" width="20" height="20" aria-hidden="true"></iconify-icon>
<span class="sr-only">{{if eq .Lang "es"}}Nivel de zoom{{else}}Zoom level{{end}}</span>
</label>
<div class="zoom-slider-container">
<span class="zoom-value zoom-value-min" aria-hidden="true">50%</span>
<input
type="range"
id="zoom-slider"
class="zoom-slider"
min="50"
max="200"
step="5"
value="100"
aria-label="{{if eq .Lang "es"}}Ajustar nivel de zoom del CV{{else}}Adjust CV zoom level{{end}}"
aria-valuemin="50"
aria-valuemax="200"
aria-valuenow="100"
aria-valuetext="100%">
<span id="zoom-value-current" class="zoom-value zoom-value-current" aria-live="polite">100%</span>
<span class="zoom-value zoom-value-max" aria-hidden="true">200%</span>
</div>
<button
id="zoom-reset"
class="zoom-reset-btn"
aria-label="{{if eq .Lang "es"}}Restablecer zoom al 100%{{else}}Reset zoom to 100%{{end}}"
title="{{if eq .Lang "es"}}Restablecer{{else}}Reset{{end}}">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"/>
<path d="M21 3v5h-5"/>
<path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"/>
<path d="M3 21v-5h5"/>
</svg>
</button>
</div>
<!-- External JavaScript - CSP Compliant -->
<script src="/static/js/main.js"></script>