Files
cv-site/templates/partials/modals/shortcuts-modal.html
T
juanatsap 9636b3659f refactor: Extract all hardcoded content to JSON files
- Move all bilingual text from templates to UI JSON (labels, buttons, modals)
- Move skills summary paragraph to CV JSON with HTML support
- Add new UI sections: navigation, viewControls, sections, footer, portfolio,
  pdfModal, shortcutsModal, infoModal, widgets
- Update Go structs to match expanded JSON structure
- Add template.HTML type for CV.SkillsSummary field
- Add JSON content validation test (70-json-content-validation.test.mjs)

Templates now contain only structural logic (CSS classes, HTML attributes)
while all user-visible text loads from JSON files for proper i18n support.
2025-11-30 10:13:37 +00:00

159 lines
8.6 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
{{define "shortcuts-modal"}}
<!-- Keyboard Shortcuts Modal - Native Dialog -->
<dialog id="shortcuts-modal" class="info-modal no-print"
_="on click call closeOnBackdrop(me, event)">
<div class="info-modal-content">
<button class="info-modal-close" onclick="document.getElementById('shortcuts-modal').close()" aria-label="{{.UI.ShortcutsModal.Close}}">
<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>
{{.UI.ShortcutsModal.Subtitle}}
</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 Icons
</div>
<span class="shortcut-desc">{{.UI.ShortcutsModal.Sections.ViewControls.ToggleIcons.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}}