txeo/cv-site
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: redesign help modal with accordion and clickable questions

Browse Source 
- Replace flat list with <details>/<summary> 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
This commit is contained in:
juanatsap
2026-04-08 14:01:17 +01:00
parent 8e93d2b893
commit 25ddfff0da
2 changed files with 245 additions and 113 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/css/04-interactive/_chat.css
+152
View File
@@ -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
========================================================================== */
templates/partials/modals/chat-help-modal.html
+93 -113
View File
@@ -1,6 +1,6 @@
{{define "chat-help-modal"}}
<!-- Chat Help Modal - Native Dialog -->
<dialog id="chat-help-modal" class="info-modal no-print"
<!-- Chat Help Modal - Native Dialog with Accordion -->
<dialog id="chat-help-modal" class="info-modal chat-help-fullscreen no-print"
_="on click call closeOnBackdrop(me, event)">
<div class="info-modal-content">
<button class="info-modal-close" commandfor="chat-help-modal" command="close" aria-label="{{if eq .Lang "es"}}Cerrar{{else}}Close{{end}}">
@@ -13,131 +13,111 @@
<span class="keyboard-icon-wrapper">
<iconify-icon icon="mdi:robot-happy-outline" width="32" height="32"></iconify-icon>
</span>
{{if eq .Lang "es"}}Asistente inteligente con IA{{else}}AI-powered assistant{{end}}
{{if eq .Lang "es"}}Asistente inteligente con IA{{else}}AI-powered intelligent assistant{{end}}
</div>
</div>
<div class="info-modal-body">
<p class="info-modal-description">
{{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}}
<p class="chat-help-intro">
{{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}}
</p>
<!-- About Experience -->
<div class="shortcuts-section">
<h3 class="shortcuts-section-title">
<iconify-icon icon="mdi:briefcase-outline" width="20" height="20"></iconify-icon>
{{if eq .Lang "es"}}Sobre Experiencia{{else}}About Experience{{end}}
</h3>
<div class="shortcuts-list">
<div class="shortcut-item">
<span class="shortcut-desc">{{if eq .Lang "es"}}¿Cuántos años de experiencia tiene Juan?{{else}}How many years of experience does Juan have?{{end}}</span>
<div class="chat-help-accordion">
<!-- Experience -->
<details class="chat-help-group" open>
<summary>
<iconify-icon icon="mdi:briefcase-outline"></iconify-icon>
{{if eq .Lang "es"}}Experiencia{{else}}Experience{{end}}
</summary>
<div class="chat-help-questions">
<button class="chat-help-q" _="on click call closeChatHelpAndAsk('{{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"}}¿Cuántos años de experiencia tiene?{{else}}How many years of experience?{{end}}</button>
<button class="chat-help-q" _="on click call closeChatHelpAndAsk('{{if eq .Lang "es"}}¿En qué empresas ha trabajado?{{else}}What companies has he worked at?{{end}}')">{{if eq .Lang "es"}}¿En qué empresas ha trabajado?{{else}}What companies has he worked at?{{end}}</button>
<button class="chat-help-q" _="on click call closeChatHelpAndAsk('{{if eq .Lang "es"}}Cuéntame sobre Olympic Broadcasting{{else}}Tell me about Olympic Broadcasting{{end}}')">{{if eq .Lang "es"}}Cuéntame sobre Olympic Broadcasting{{else}}Tell me about Olympic Broadcasting{{end}}</button>
<button class="chat-help-q" _="on click call closeChatHelpAndAsk('{{if eq .Lang "es"}}¿Qué hacía en SAP?{{else}}What did he do at SAP?{{end}}')">{{if eq .Lang "es"}}¿Qué hacía en SAP?{{else}}What did he do at SAP?{{end}}</button>
</div>
<div class="shortcut-item">
<span class="shortcut-desc">{{if eq .Lang "es"}}¿En qué empresas ha trabajado?{{else}}What companies has he worked at?{{end}}</span>
</details>
<!-- Technologies -->
<details class="chat-help-group">
<summary>
<iconify-icon icon="mdi:code-tags"></iconify-icon>
{{if eq .Lang "es"}}Tecnologías{{else}}Technologies{{end}}
</summary>
<div class="chat-help-questions">
<button class="chat-help-q" _="on click call closeChatHelpAndAsk('{{if eq .Lang "es"}}¿Qué lenguajes de programación conoce?{{else}}What programming languages does he know?{{end}}')">{{if eq .Lang "es"}}¿Qué lenguajes conoce?{{else}}What languages does he know?{{end}}</button>
<button class="chat-help-q" _="on click call closeChatHelpAndAsk('{{if eq .Lang "es"}}¿Ha trabajado con React? ¿Dónde?{{else}}Has he worked with React? Where?{{end}}')">{{if eq .Lang "es"}}¿Ha trabajado con React?{{else}}Has he worked with React?{{end}}</button>
<button class="chat-help-q" _="on click call closeChatHelpAndAsk('{{if eq .Lang "es"}}¿Cuál es su experiencia con Go?{{else}}What is his Go experience?{{end}}')">{{if eq .Lang "es"}}¿Experiencia con Go?{{else}}Go experience?{{end}}</button>
<button class="chat-help-q" _="on click call closeChatHelpAndAsk('{{if eq .Lang "es"}}¿Conoce Node.js?{{else}}Does he know Node.js?{{end}}')">{{if eq .Lang "es"}}¿Conoce Node.js?{{else}}Does he know Node.js?{{end}}</button>
<button class="chat-help-q" _="on click call closeChatHelpAndAsk('{{if eq .Lang "es"}}¿Tiene experiencia con Docker?{{else}}Does he have Docker experience?{{end}}')">{{if eq .Lang "es"}}¿Experiencia con Docker?{{else}}Docker experience?{{end}}</button>
</div>
<div class="shortcut-item">
<span class="shortcut-desc">{{if eq .Lang "es"}}Cuéntame sobre su paso por Olympic Broadcasting{{else}}Tell me about his time at Olympic Broadcasting{{end}}</span>
</details>
<!-- Projects -->
<details class="chat-help-group">
<summary>
<iconify-icon icon="mdi:rocket-launch-outline"></iconify-icon>
{{if eq .Lang "es"}}Proyectos{{else}}Projects{{end}}
</summary>
<div class="chat-help-questions">
<button class="chat-help-q" _="on click call closeChatHelpAndAsk('{{if eq .Lang "es"}}¿Qué proyectos personales ha creado?{{else}}What personal projects has he built?{{end}}')">{{if eq .Lang "es"}}¿Qué proyectos ha creado?{{else}}What projects has he built?{{end}}</button>
<button class="chat-help-q" _="on click call closeChatHelpAndAsk('{{if eq .Lang "es"}}Cuéntame sobre Immich Photo Manager{{else}}Tell me about Immich Photo Manager{{end}}')">{{if eq .Lang "es"}}Sobre Immich Photo Manager{{else}}About Immich Photo Manager{{end}}</button>
<button class="chat-help-q" _="on click call closeChatHelpAndAsk('{{if eq .Lang "es"}}¿Qué proyectos open-source mantiene?{{else}}What open-source projects does he maintain?{{end}}')">{{if eq .Lang "es"}}¿Proyectos open-source?{{else}}Open-source projects?{{end}}</button>
</div>
<div class="shortcut-item">
<span class="shortcut-desc">{{if eq .Lang "es"}}¿Qué hacía en SAP?{{else}}What did he do at SAP?{{end}}</span>
</details>
<!-- Education -->
<details class="chat-help-group">
<summary>
<iconify-icon icon="mdi:school-outline"></iconify-icon>
{{if eq .Lang "es"}}Formación{{else}}Education{{end}}
</summary>
<div class="chat-help-questions">
<button class="chat-help-q" _="on click call closeChatHelpAndAsk('{{if eq .Lang "es"}}¿Qué certificaciones tiene?{{else}}What certifications does he have?{{end}}')">{{if eq .Lang "es"}}¿Certificaciones?{{else}}Certifications?{{end}}</button>
<button class="chat-help-q" _="on click call closeChatHelpAndAsk('{{if eq .Lang "es"}}¿Dónde estudió?{{else}}Where did he study?{{end}}')">{{if eq .Lang "es"}}¿Dónde estudió?{{else}}Where did he study?{{end}}</button>
<button class="chat-help-q" _="on click call closeChatHelpAndAsk('{{if eq .Lang "es"}}¿Qué cursos ha completado?{{else}}What courses has he completed?{{end}}')">{{if eq .Lang "es"}}¿Cursos completados?{{else}}Courses completed?{{end}}</button>
</div>
</div>
</details>
<!-- Skills -->
<details class="chat-help-group">
<summary>
<iconify-icon icon="mdi:star-outline"></iconify-icon>
{{if eq .Lang "es"}}Habilidades{{else}}Skills{{end}}
</summary>
<div class="chat-help-questions">
<button class="chat-help-q" _="on click call closeChatHelpAndAsk('{{if eq .Lang "es"}}¿Cuáles son sus principales habilidades técnicas?{{else}}What are his main technical skills?{{end}}')">{{if eq .Lang "es"}}¿Habilidades técnicas principales?{{else}}Main technical skills?{{end}}</button>
<button class="chat-help-q" _="on click call closeChatHelpAndAsk('{{if eq .Lang "es"}}¿Qué hay de CI/CD?{{else}}What about CI/CD?{{end}}')">{{if eq .Lang "es"}}¿Experiencia con CI/CD?{{else}}CI/CD experience?{{end}}</button>
<button class="chat-help-q" _="on click call closeChatHelpAndAsk('{{if eq .Lang "es"}}¿Qué idiomas habla?{{else}}What languages does he speak?{{end}}')">{{if eq .Lang "es"}}¿Qué idiomas habla?{{else}}Languages spoken?{{end}}</button>
</div>
</details>
</div>
<!-- About Technologies -->
<div class="shortcuts-section">
<h3 class="shortcuts-section-title">
<iconify-icon icon="mdi:code-tags" width="20" height="20"></iconify-icon>
{{if eq .Lang "es"}}Sobre Tecnologías{{else}}About Technologies{{end}}
</h3>
<div class="shortcuts-list">
<div class="shortcut-item">
<span class="shortcut-desc">{{if eq .Lang "es"}}¿Qué lenguajes de programación conoce?{{else}}What programming languages does he know?{{end}}</span>
</div>
<div class="shortcut-item">
<span class="shortcut-desc">{{if eq .Lang "es"}}¿Ha trabajado con React? ¿Dónde?{{else}}Has he worked with React? Where?{{end}}</span>
</div>
<div class="shortcut-item">
<span class="shortcut-desc">{{if eq .Lang "es"}}¿Cuál es su experiencia con Go?{{else}}What's his Go experience?{{end}}</span>
</div>
<div class="shortcut-item">
<span class="shortcut-desc">{{if eq .Lang "es"}}¿Conoce Node.js?{{else}}Does he know Node.js?{{end}}</span>
</div>
</div>
</div>
<!-- About Projects -->
<div class="shortcuts-section">
<h3 class="shortcuts-section-title">
<iconify-icon icon="mdi:rocket-launch-outline" width="20" height="20"></iconify-icon>
{{if eq .Lang "es"}}Sobre Proyectos{{else}}About Projects{{end}}
</h3>
<div class="shortcuts-list">
<div class="shortcut-item">
<span class="shortcut-desc">{{if eq .Lang "es"}}¿Qué proyectos personales ha creado?{{else}}What personal projects has he built?{{end}}</span>
</div>
<div class="shortcut-item">
<span class="shortcut-desc">{{if eq .Lang "es"}}Cuéntame sobre Immich Photo Manager{{else}}Tell me about the Immich Photo Manager{{end}}</span>
</div>
<div class="shortcut-item">
<span class="shortcut-desc">{{if eq .Lang "es"}}¿Qué proyectos open-source mantiene?{{else}}What open-source projects does he maintain?{{end}}</span>
</div>
</div>
</div>
<!-- About Education & Certifications -->
<div class="shortcuts-section">
<h3 class="shortcuts-section-title">
<iconify-icon icon="mdi:school-outline" width="20" height="20"></iconify-icon>
{{if eq .Lang "es"}}Formación y Certificaciones{{else}}Education &amp; Certifications{{end}}
</h3>
<div class="shortcuts-list">
<div class="shortcut-item">
<span class="shortcut-desc">{{if eq .Lang "es"}}¿Qué certificaciones tiene?{{else}}What certifications does he have?{{end}}</span>
</div>
<div class="shortcut-item">
<span class="shortcut-desc">{{if eq .Lang "es"}}¿Dónde estudió?{{else}}Where did he study?{{end}}</span>
</div>
<div class="shortcut-item">
<span class="shortcut-desc">{{if eq .Lang "es"}}¿Qué cursos ha completado?{{else}}What courses has he completed?{{end}}</span>
</div>
</div>
</div>
<!-- About Skills -->
<div class="shortcuts-section">
<h3 class="shortcuts-section-title">
<iconify-icon icon="mdi:star-outline" width="20" height="20"></iconify-icon>
{{if eq .Lang "es"}}Sobre Habilidades{{else}}About Skills{{end}}
</h3>
<div class="shortcuts-list">
<div class="shortcut-item">
<span class="shortcut-desc">{{if eq .Lang "es"}}¿Cuáles son sus principales habilidades técnicas?{{else}}What are his main technical skills?{{end}}</span>
</div>
<div class="shortcut-item">
<span class="shortcut-desc">{{if eq .Lang "es"}}¿Tiene experiencia con Docker?{{else}}Does he have experience with Docker?{{end}}</span>
</div>
<div class="shortcut-item">
<span class="shortcut-desc">{{if eq .Lang "es"}}¿Qué hay de CI/CD?{{else}}What about CI/CD?{{end}}</span>
</div>
</div>
</div>
<!-- How it works -->
<div class="shortcuts-section">
<h3 class="shortcuts-section-title">
<iconify-icon icon="mdi:information-outline" width="20" height="20"></iconify-icon>
{{if eq .Lang "es"}}Cómo funciona{{else}}How it works{{end}}
</h3>
<div class="shortcuts-list">
<div class="shortcut-item">
<span class="shortcut-desc">
{{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}}
</span>
</div>
</div>
<!-- How it works footer -->
<div class="chat-help-footer">
<iconify-icon icon="mdi:information-outline"></iconify-icon>
<span>{{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}}</span>
</div>
</div>
</div>
</dialog>
<!-- Helper function: close modal, open chat, send question -->
<script>
function closeChatHelpAndAsk(question) {
// Close the modal
document.getElementById('chat-help-modal').close();
// Open chat panel if not open
var panel = document.getElementById('chat-panel');
var btn = document.getElementById('chat-toggle-btn');
if (!panel.classList.contains('chat-open')) {
panel.classList.add('chat-open');
btn.classList.add('mascot-active');
}
// Set the question and submit
document.getElementById('chat-input').value = question;
htmx.trigger(document.getElementById('chat-form'), 'submit');
}
</script>
{{end}}