From 25ddfff0daf245a8ffd73db2306f9ef4aa3bdfad Mon Sep 17 00:00:00 2001 From: juanatsap Date: Wed, 8 Apr 2026 14:01:17 +0100 Subject: [PATCH] feat: redesign help modal with accordion and clickable questions MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Replace flat list with
/ accordion (5 categories) - Questions are clickable: close modal → open chat → send question - closeChatHelpAndAsk() helper bridges modal and chat panel - Green accent on category icons and question hover - Chevron arrows for expand/collapse state - Dark theme support for all accordion elements - Compact layout with no wasted space --- static/css/04-interactive/_chat.css | 152 +++++++++++++ .../partials/modals/chat-help-modal.html | 206 ++++++++---------- 2 files changed, 245 insertions(+), 113 deletions(-) diff --git a/static/css/04-interactive/_chat.css b/static/css/04-interactive/_chat.css index 62a0114..8492c82 100644 --- a/static/css/04-interactive/_chat.css +++ b/static/css/04-interactive/_chat.css @@ -298,6 +298,158 @@ background: #1e8c4c; } +/* ========================================================================== + Help Modal — Fullscreen Accordion + ========================================================================== */ + +.chat-help-fullscreen .info-modal-content { + max-width: 560px; + max-height: 90vh; + overflow-y: auto; +} + +.chat-help-intro { + font-size: 0.82rem; + color: var(--text-muted, #666666); + line-height: 1.5; + margin: 0 0 16px 0; + text-align: center; +} + +.chat-help-accordion { + display: flex; + flex-direction: column; + gap: 6px; +} + +.chat-help-group { + border: 1px solid var(--border-light, #e0e0e0); + border-radius: 6px; + overflow: hidden; +} + +.chat-help-group summary { + display: flex; + align-items: center; + gap: 8px; + padding: 10px 14px; + font-family: 'Quicksand', sans-serif; + font-size: 0.85rem; + font-weight: 600; + color: var(--text-primary, #1a1a1a); + cursor: pointer; + background: var(--paper-secondary-bg, #f5f5f5); + list-style: none; + transition: background 0.2s; +} + +.chat-help-group summary::-webkit-details-marker { + display: none; +} + +.chat-help-group summary::after { + content: ''; + margin-left: auto; + width: 6px; + height: 6px; + border-right: 2px solid var(--text-muted, #666); + border-bottom: 2px solid var(--text-muted, #666); + transform: rotate(-45deg); + transition: transform 0.2s; +} + +.chat-help-group[open] summary::after { + transform: rotate(45deg); +} + +.chat-help-group summary:hover { + background: var(--paper-bg, #ffffff); +} + +.chat-help-group summary iconify-icon { + font-size: 1.1rem; + color: var(--accent-green, #27ae60); +} + +.chat-help-questions { + display: flex; + flex-direction: column; + padding: 4px 8px 8px; + gap: 2px; +} + +.chat-help-q { + display: block; + width: 100%; + text-align: left; + background: none; + border: none; + padding: 7px 12px; + font-size: 0.78rem; + font-family: 'Source Sans Pro', sans-serif; + color: var(--text-secondary, #333333); + cursor: pointer; + border-radius: 4px; + transition: all 0.15s; + line-height: 1.4; +} + +.chat-help-q:hover { + background: var(--accent-green, #27ae60); + color: #fff; +} + +.chat-help-footer { + display: flex; + align-items: center; + gap: 8px; + margin-top: 16px; + padding: 10px 12px; + background: var(--paper-secondary-bg, #f5f5f5); + border-radius: 6px; + font-size: 0.7rem; + color: var(--text-muted, #666666); + line-height: 1.4; +} + +.chat-help-footer iconify-icon { + font-size: 1rem; + flex-shrink: 0; + color: var(--text-light, #999999); +} + +/* Dark theme for help modal */ +.theme-clean .chat-help-group { + border-color: #333333; +} + +.theme-clean .chat-help-group summary { + background: #2a2a2a; + color: #d0d0d0; +} + +.theme-clean .chat-help-group summary:hover { + background: #333333; +} + +.theme-clean .chat-help-q { + color: #999999; +} + +.theme-clean .chat-help-q:hover { + background: #166b3a; + color: #fff; +} + +.theme-clean .chat-help-footer { + background: #2a2a2a; + color: #777777; +} + +.theme-clean .chat-help-intro { + color: #999999; +} + /* ========================================================================== Responsive ========================================================================== */ diff --git a/templates/partials/modals/chat-help-modal.html b/templates/partials/modals/chat-help-modal.html index 9b3c2a8..52c2ea1 100644 --- a/templates/partials/modals/chat-help-modal.html +++ b/templates/partials/modals/chat-help-modal.html @@ -1,6 +1,6 @@ {{define "chat-help-modal"}} - - +
-

- {{if eq .Lang "es"}}Un asistente con inteligencia artificial que puede responder preguntas sobre este CV. Consulta experiencia profesional, proyectos, habilidades, formación y más — todo basado en datos reales del CV.{{else}}An AI-powered assistant that can answer questions about this CV. Query professional experience, projects, skills, education, and more — all based on actual CV data.{{end}} +

+ {{if eq .Lang "es"}}Pregunta lo que quieras sobre este CV. Haz clic en cualquier pregunta para enviarla directamente al asistente.{{else}}Ask anything about this CV. Click any question to send it directly to the assistant.{{end}}

- -
-

- - {{if eq .Lang "es"}}Sobre Experiencia{{else}}About Experience{{end}} -

-
-
- {{if eq .Lang "es"}}¿Cuántos años de experiencia tiene Juan?{{else}}How many years of experience does Juan have?{{end}} +
+ + +
+ + + {{if eq .Lang "es"}}Experiencia{{else}}Experience{{end}} + +
+ + + +
-
- {{if eq .Lang "es"}}¿En qué empresas ha trabajado?{{else}}What companies has he worked at?{{end}} +
+ + +
+ + + {{if eq .Lang "es"}}Tecnologías{{else}}Technologies{{end}} + +
+ + + + +
-
- {{if eq .Lang "es"}}Cuéntame sobre su paso por Olympic Broadcasting{{else}}Tell me about his time at Olympic Broadcasting{{end}} +
+ + +
+ + + {{if eq .Lang "es"}}Proyectos{{else}}Projects{{end}} + +
+ + +
-
- {{if eq .Lang "es"}}¿Qué hacía en SAP?{{else}}What did he do at SAP?{{end}} +
+ + +
+ + + {{if eq .Lang "es"}}Formación{{else}}Education{{end}} + +
+ + +
-
+
+ + +
+ + + {{if eq .Lang "es"}}Habilidades{{else}}Skills{{end}} + +
+ + + +
+
+ - -
-

- - {{if eq .Lang "es"}}Sobre Tecnologías{{else}}About Technologies{{end}} -

-
-
- {{if eq .Lang "es"}}¿Qué lenguajes de programación conoce?{{else}}What programming languages does he know?{{end}} -
-
- {{if eq .Lang "es"}}¿Ha trabajado con React? ¿Dónde?{{else}}Has he worked with React? Where?{{end}} -
-
- {{if eq .Lang "es"}}¿Cuál es su experiencia con Go?{{else}}What's his Go experience?{{end}} -
-
- {{if eq .Lang "es"}}¿Conoce Node.js?{{else}}Does he know Node.js?{{end}} -
-
-
- - -
-

- - {{if eq .Lang "es"}}Sobre Proyectos{{else}}About Projects{{end}} -

-
-
- {{if eq .Lang "es"}}¿Qué proyectos personales ha creado?{{else}}What personal projects has he built?{{end}} -
-
- {{if eq .Lang "es"}}Cuéntame sobre Immich Photo Manager{{else}}Tell me about the Immich Photo Manager{{end}} -
-
- {{if eq .Lang "es"}}¿Qué proyectos open-source mantiene?{{else}}What open-source projects does he maintain?{{end}} -
-
-
- - -
-

- - {{if eq .Lang "es"}}Formación y Certificaciones{{else}}Education & Certifications{{end}} -

-
-
- {{if eq .Lang "es"}}¿Qué certificaciones tiene?{{else}}What certifications does he have?{{end}} -
-
- {{if eq .Lang "es"}}¿Dónde estudió?{{else}}Where did he study?{{end}} -
-
- {{if eq .Lang "es"}}¿Qué cursos ha completado?{{else}}What courses has he completed?{{end}} -
-
-
- - -
-

- - {{if eq .Lang "es"}}Sobre Habilidades{{else}}About Skills{{end}} -

-
-
- {{if eq .Lang "es"}}¿Cuáles son sus principales habilidades técnicas?{{else}}What are his main technical skills?{{end}} -
-
- {{if eq .Lang "es"}}¿Tiene experiencia con Docker?{{else}}Does he have experience with Docker?{{end}} -
-
- {{if eq .Lang "es"}}¿Qué hay de CI/CD?{{else}}What about CI/CD?{{end}} -
-
-
- - -
-

- - {{if eq .Lang "es"}}Cómo funciona{{else}}How it works{{end}} -

-
-
- - {{if eq .Lang "es"}}Impulsado por Google ADK Go 1.0 y Gemini AI. Las preguntas se responden consultando los datos reales del CV — sin alucinaciones, siempre preciso.{{else}}Powered by Google ADK Go 1.0 and Gemini AI. Questions are answered by querying the actual CV data — no hallucination, always accurate.{{end}} - -
-
+ +
+ + {{if eq .Lang "es"}}Impulsado por Google ADK Go 1.0 y Gemini AI. Las respuestas provienen de los datos reales del CV.{{else}}Powered by Google ADK Go 1.0 and Gemini AI. Answers come from actual CV data.{{end}}
+ + + {{end}}