This commit is contained in:
juanatsap
2025-11-15 15:59:54 +00:00
parent aeab81dd42
commit 1f7757c848
39 changed files with 3781 additions and 797 deletions
@@ -0,0 +1,161 @@
{{define "shortcuts-modal"}}
<!-- Keyboard Shortcuts Modal - Native Dialog -->
<dialog id="shortcuts-modal" class="info-modal no-print"
_="on click
if event.target is me
call me.close()
end">
<div class="info-modal-content">
<button class="info-modal-close" onclick="document.getElementById('shortcuts-modal').close()" aria-label="{{if eq .Lang "es"}}Cerrar{{else}}Close{{end}}">
<iconify-icon icon="mdi:close" width="24" height="24"></iconify-icon>
</button>
<div class="info-modal-header">
<h2>{{.UI.ShortcutsModal.Title}}</h2>
<div class="info-modal-cv-title">
<span class="keyboard-icon-wrapper">
<iconify-icon icon="mdi:keyboard-outline" width="32" height="32"></iconify-icon>
</span>
{{if eq .Lang "es"}}Aprende los Atajos{{else}}Learn the Shortcuts{{end}}
</div>
</div>
<div class="info-modal-body">
<!-- Zoom Shortcuts -->
<div class="shortcuts-section">
<h3 class="shortcuts-section-title">
<iconify-icon icon="mdi:magnify" width="20" height="20"></iconify-icon>
{{.UI.ShortcutsModal.Sections.Zoom.Title}}
</h3>
<div class="shortcuts-list">
<div class="shortcut-item">
<div class="shortcut-keys">
<kbd><iconify-icon icon="mdi:apple-keyboard-control" width="14" height="14"></iconify-icon></kbd> / <kbd><iconify-icon icon="mdi:apple-keyboard-command" width="14" height="14"></iconify-icon></kbd> <kbd>+</kbd>
</div>
<span class="shortcut-desc">{{.UI.ShortcutsModal.Sections.Zoom.ZoomIn.Description}}</span>
</div>
<div class="shortcut-item">
<div class="shortcut-keys">
<kbd><iconify-icon icon="mdi:apple-keyboard-control" width="14" height="14"></iconify-icon></kbd> / <kbd><iconify-icon icon="mdi:apple-keyboard-command" width="14" height="14"></iconify-icon></kbd> <kbd></kbd>
</div>
<span class="shortcut-desc">{{.UI.ShortcutsModal.Sections.Zoom.ZoomOut.Description}}</span>
</div>
<div class="shortcut-item">
<div class="shortcut-keys">
<kbd><iconify-icon icon="mdi:apple-keyboard-control" width="14" height="14"></iconify-icon></kbd> / <kbd><iconify-icon icon="mdi:apple-keyboard-command" width="14" height="14"></iconify-icon></kbd> <kbd>0</kbd>
</div>
<span class="shortcut-desc">{{.UI.ShortcutsModal.Sections.Zoom.ZoomReset.Description}}</span>
</div>
</div>
</div>
<!-- View Controls -->
<div class="shortcuts-section">
<h3 class="shortcuts-section-title">
<iconify-icon icon="mdi:tune-variant" width="20" height="20"></iconify-icon>
{{.UI.ShortcutsModal.Sections.ViewControls.Title}}
</h3>
<div class="shortcuts-list">
<div class="shortcut-item">
<div class="shortcut-keys">
<kbd><iconify-icon icon="mdi:keyboard-tab" width="14" height="14"></iconify-icon></kbd> to Length
</div>
<span class="shortcut-desc">{{.UI.ShortcutsModal.Sections.ViewControls.ToggleLength.Description}}</span>
</div>
<div class="shortcut-item">
<div class="shortcut-keys">
<kbd><iconify-icon icon="mdi:keyboard-tab" width="14" height="14"></iconify-icon></kbd> to Logos
</div>
<span class="shortcut-desc">{{.UI.ShortcutsModal.Sections.ViewControls.ToggleLogos.Description}}</span>
</div>
<div class="shortcut-item">
<div class="shortcut-keys">
<kbd><iconify-icon icon="mdi:keyboard-tab" width="14" height="14"></iconify-icon></kbd> to View
</div>
<span class="shortcut-desc">{{.UI.ShortcutsModal.Sections.ViewControls.ToggleTheme.Description}}</span>
</div>
</div>
</div>
<!-- Navigation -->
<div class="shortcuts-section">
<h3 class="shortcuts-section-title">
<iconify-icon icon="mdi:compass-outline" width="20" height="20"></iconify-icon>
{{.UI.ShortcutsModal.Sections.Navigation.Title}}
</h3>
<div class="shortcuts-list">
<div class="shortcut-item">
<div class="shortcut-keys">
Menu → Expand All
</div>
<span class="shortcut-desc">{{.UI.ShortcutsModal.Sections.Navigation.ExpandAll.Description}}</span>
</div>
<div class="shortcut-item">
<div class="shortcut-keys">
Menu → Collapse All
</div>
<span class="shortcut-desc">{{.UI.ShortcutsModal.Sections.Navigation.CollapseAll.Description}}</span>
</div>
<div class="shortcut-item">
<div class="shortcut-keys">
Click <kbd></kbd> Button
</div>
<span class="shortcut-desc">{{.UI.ShortcutsModal.Sections.Navigation.ScrollToTop.Description}}</span>
</div>
</div>
</div>
<!-- Actions -->
<div class="shortcuts-section">
<h3 class="shortcuts-section-title">
<iconify-icon icon="mdi:lightning-bolt" width="20" height="20"></iconify-icon>
{{.UI.ShortcutsModal.Sections.Actions.Title}}
</h3>
<div class="shortcuts-list">
<div class="shortcut-item">
<div class="shortcut-keys">
<kbd><iconify-icon icon="mdi:apple-keyboard-control" width="14" height="14"></iconify-icon></kbd> / <kbd><iconify-icon icon="mdi:apple-keyboard-command" width="14" height="14"></iconify-icon></kbd> <kbd>P</kbd>
</div>
<span class="shortcut-desc">{{.UI.ShortcutsModal.Sections.Actions.Print.Description}}</span>
</div>
<div class="shortcut-item">
<div class="shortcut-keys">
<kbd><iconify-icon icon="mdi:keyboard-esc" width="14" height="14"></iconify-icon></kbd>
</div>
<span class="shortcut-desc">{{.UI.ShortcutsModal.Sections.Actions.CloseModal.Description}}</span>
</div>
<div class="shortcut-item">
<div class="shortcut-keys">
<kbd>?</kbd>
</div>
<span class="shortcut-desc">{{.UI.ShortcutsModal.Sections.Actions.ShowHelp.Description}}</span>
</div>
</div>
</div>
<!-- Browser Defaults -->
<div class="shortcuts-section">
<h3 class="shortcuts-section-title">
<iconify-icon icon="mdi:web" width="20" height="20"></iconify-icon>
{{.UI.ShortcutsModal.Sections.Browser.Title}}
</h3>
<div class="shortcuts-list">
<div class="shortcut-item">
<div class="shortcut-keys">
<kbd><iconify-icon icon="mdi:keyboard-tab" width="14" height="14"></iconify-icon></kbd>
</div>
<span class="shortcut-desc">{{.UI.ShortcutsModal.Sections.Browser.Tab.Description}}</span>
</div>
<div class="shortcut-item">
<div class="shortcut-keys">
<kbd><iconify-icon icon="mdi:keyboard-return" width="14" height="14"></iconify-icon></kbd> / <kbd><iconify-icon icon="mdi:keyboard-space" width="14" height="14"></iconify-icon></kbd>
</div>
<span class="shortcut-desc">{{.UI.ShortcutsModal.Sections.Browser.Enter.Description}}</span>
</div>
</div>
</div>
</div>
</div>
</dialog>
{{end}}
@@ -102,17 +102,18 @@
id="lengthToggleMenu"
{{if eq .CVLengthClass "cv-long"}}checked{{end}}
hx-post="/toggle/length?lang={{.Lang}}"
hx-target="#mobile-length-toggle"
hx-swap="outerHTML"
_="on htmx:afterRequest
hx-swap="none"
_="on change
if my.checked
remove .cv-short from .cv-paper
add .cv-long to .cv-paper
set localStorage['cv-length'] to 'long'
set #lengthToggle's checked to true
else
remove .cv-long from .cv-paper
add .cv-short to .cv-paper
set localStorage['cv-length'] to 'short'
set #lengthToggle's checked to false
end">
<span class="icon-toggle-slider">
<iconify-icon icon="mdi:file-document-outline" width="16" height="16" class="icon-left"></iconify-icon>
@@ -132,15 +133,16 @@
id="logoToggleMenu"
{{if .ShowLogos}}checked{{end}}
hx-post="/toggle/logos?lang={{.Lang}}"
hx-target="#mobile-logo-toggle"
hx-swap="outerHTML"
_="on htmx:afterRequest
hx-swap="none"
_="on change
if my.checked
add .show-logos to .cv-paper
set localStorage['cv-logos'] to 'true'
set #logoToggle's checked to true
else
remove .show-logos from .cv-paper
set localStorage['cv-logos'] to 'false'
set #logoToggle's checked to false
end">
<span class="icon-toggle-slider">
<iconify-icon icon="mdi:image-off-outline" width="16" height="16" class="icon-left"></iconify-icon>
@@ -160,15 +162,16 @@
id="themeToggleMenu"
{{if .ThemeClean}}checked{{end}}
hx-post="/toggle/theme?lang={{.Lang}}"
hx-target="#mobile-theme-toggle"
hx-swap="outerHTML"
_="on htmx:afterRequest
hx-swap="none"
_="on change
if my.checked
add .theme-clean to the body
set localStorage['cv-theme'] to 'clean'
set #themeToggle's checked to true
else
remove .theme-clean from the body
set localStorage['cv-theme'] to 'default'
set #themeToggle's checked to false
end">
<span class="icon-toggle-slider">
<iconify-icon icon="mdi:page-layout-sidebar-left" width="16" height="16" class="icon-left"></iconify-icon>
@@ -9,17 +9,18 @@
id="lengthToggle"
{{if eq .CVLengthClass "cv-long"}}checked{{end}}
hx-post="/toggle/length?lang={{.Lang}}"
hx-target="#desktop-length-toggle"
hx-swap="outerHTML"
_="on htmx:afterRequest
hx-swap="none"
_="on change
if my.checked
remove .cv-short from .cv-paper
add .cv-long to .cv-paper
set localStorage['cv-length'] to 'long'
set #lengthToggleMenu's checked to true
else
remove .cv-long from .cv-paper
add .cv-short to .cv-paper
set localStorage['cv-length'] to 'short'
set #lengthToggleMenu's checked to false
end">
<span class="icon-toggle-slider">
<iconify-icon icon="mdi:file-document-outline" width="16" height="16" class="icon-left"></iconify-icon>
@@ -36,15 +37,16 @@
id="logoToggle"
{{if .ShowLogos}}checked{{end}}
hx-post="/toggle/logos?lang={{.Lang}}"
hx-target="#desktop-logo-toggle"
hx-swap="outerHTML"
_="on htmx:afterRequest
hx-swap="none"
_="on change
if my.checked
add .show-logos to .cv-paper
set localStorage['cv-logos'] to 'true'
set #logoToggleMenu's checked to true
else
remove .show-logos from .cv-paper
set localStorage['cv-logos'] to 'false'
set #logoToggleMenu's checked to false
end">
<span class="icon-toggle-slider">
<iconify-icon icon="mdi:image-off-outline" width="16" height="16" class="icon-left"></iconify-icon>
@@ -61,15 +63,16 @@
id="themeToggle"
{{if .ThemeClean}}checked{{end}}
hx-post="/toggle/theme?lang={{.Lang}}"
hx-target="#desktop-theme-toggle"
hx-swap="outerHTML"
_="on htmx:afterRequest
hx-swap="none"
_="on change
if my.checked
add .theme-clean to the body
set localStorage['cv-theme'] to 'clean'
set #themeToggleMenu's checked to true
else
remove .theme-clean from the body
set localStorage['cv-theme'] to 'default'
set #themeToggleMenu's checked to false
end">
<span class="icon-toggle-slider">
<iconify-icon icon="mdi:page-layout-sidebar-left" width="16" height="16" class="icon-left"></iconify-icon>
+1 -1
View File
@@ -6,7 +6,7 @@
style="display: none;"
_="on click
call event.preventDefault()
set window.scrollTo({top: 0, behavior: 'smooth'})">
call window.scrollTo({top: 0, behavior: 'smooth'})">
<iconify-icon icon="mdi:arrow-up" width="24" height="24"></iconify-icon>
</button>
{{end}}
@@ -0,0 +1,11 @@
{{define "shortcuts-button"}}
<!-- Keyboard Shortcuts Button (Fixed Right) -->
<button
id="shortcuts-button"
class="fixed-btn shortcuts-btn no-print"
onclick="document.getElementById('shortcuts-modal').showModal()"
aria-label="{{if eq .Lang "es"}}Atajos de teclado{{else}}Keyboard shortcuts{{end}}"
title="{{if eq .Lang "es"}}Atajos de teclado (?){{else}}Keyboard shortcuts (?){{end}}">
<iconify-icon icon="mdi:keyboard-outline" width="28" height="28"></iconify-icon>
</button>
{{end}}
+2 -21
View File
@@ -123,29 +123,10 @@
set inverseZoom to 1 / zoomLevel
set #back-to-top's *zoom to inverseZoom
set #info-button's *zoom to inverseZoom
set #shortcuts-button's *zoom to inverseZoom
-- Save to localStorage
set localStorage['cv-zoom'] to zoomValue
on keydown[ctrlKey or metaKey] from document
if event.shiftKey exit end
if event.key is '+' or event.key is '='
halt the event
set currentZoom to my value as a Number
set newZoom to Math.min(175, currentZoom + 10)
set my value to newZoom
send input to me
else if event.key is '-'
halt the event
set currentZoom to my value as a Number
set newZoom to Math.max(25, currentZoom - 10)
set my value to newZoom
send input to me
else if event.key is '0'
halt the event
set my value to 100
send input to me
end">
set localStorage['cv-zoom'] to zoomValue">
<span class="zoom-value zoom-value-max" aria-hidden="true">175</span>