339 lines
15 KiB
JavaScript
339 lines
15 KiB
JavaScript
/* ============================================================
|
||
IDE CONSULTORES – SCRIPTS GLOBALES
|
||
============================================================ */
|
||
|
||
/* ── THEME TOGGLE ──────────────────────────────────────────── */
|
||
(function () {
|
||
const stored = localStorage.getItem('ide-theme') || 'light';
|
||
document.documentElement.setAttribute('data-theme', stored);
|
||
})();
|
||
|
||
function initThemeToggle() {
|
||
const btn = document.querySelector('.theme-toggle');
|
||
if (!btn) return;
|
||
|
||
function updateBtn() {
|
||
const isDark = document.documentElement.getAttribute('data-theme') === 'dark';
|
||
btn.textContent = isDark ? '☀ Claro' : '☾ Oscuro';
|
||
}
|
||
|
||
updateBtn();
|
||
|
||
btn.addEventListener('click', () => {
|
||
const current = document.documentElement.getAttribute('data-theme');
|
||
const next = current === 'dark' ? 'light' : 'dark';
|
||
document.documentElement.setAttribute('data-theme', next);
|
||
localStorage.setItem('ide-theme', next);
|
||
updateBtn();
|
||
});
|
||
}
|
||
|
||
/* ── HAMBURGER MENU ─────────────────────────────────────────── */
|
||
function initHamburger() {
|
||
const btn = document.querySelector('.hamburger');
|
||
const menu = document.querySelector('.mobile-menu');
|
||
if (!btn || !menu) return;
|
||
|
||
btn.addEventListener('click', () => {
|
||
menu.classList.toggle('open');
|
||
});
|
||
|
||
document.addEventListener('click', (e) => {
|
||
if (!btn.contains(e.target) && !menu.contains(e.target)) {
|
||
menu.classList.remove('open');
|
||
}
|
||
});
|
||
}
|
||
|
||
/* ── ACTIVE NAV LINK ─────────────────────────────────────────── */
|
||
function initActiveNav() {
|
||
const path = window.location.pathname.split('/').pop() || 'index.html';
|
||
document.querySelectorAll('.navbar__links a, .mobile-menu a').forEach(a => {
|
||
const href = a.getAttribute('href');
|
||
if (href === path) a.classList.add('active');
|
||
});
|
||
}
|
||
|
||
/* ── SCROLL FADE-IN ─────────────────────────────────────────── */
|
||
function initFadeIn() {
|
||
const els = document.querySelectorAll('.fade-in');
|
||
if (!els.length) return;
|
||
|
||
const obs = new IntersectionObserver((entries) => {
|
||
entries.forEach(e => {
|
||
if (e.isIntersecting) { e.target.classList.add('visible'); obs.unobserve(e.target); }
|
||
});
|
||
}, { threshold: 0.12 });
|
||
|
||
els.forEach(el => obs.observe(el));
|
||
}
|
||
|
||
/* ── MODAL ────────────────────────────────────────────────────── */
|
||
function openModal(id) {
|
||
const overlay = document.getElementById(id);
|
||
if (!overlay) return;
|
||
overlay.classList.add('open');
|
||
document.body.style.overflow = 'hidden';
|
||
}
|
||
|
||
function closeModal(id) {
|
||
const overlay = document.getElementById(id);
|
||
if (!overlay) return;
|
||
overlay.classList.remove('open');
|
||
document.body.style.overflow = '';
|
||
}
|
||
|
||
function initModals() {
|
||
// Close on overlay click
|
||
document.querySelectorAll('.modal-overlay').forEach(overlay => {
|
||
overlay.addEventListener('click', (e) => {
|
||
if (e.target === overlay) closeModal(overlay.id);
|
||
});
|
||
});
|
||
// Close buttons
|
||
document.querySelectorAll('.modal__close').forEach(btn => {
|
||
btn.addEventListener('click', () => {
|
||
const overlay = btn.closest('.modal-overlay');
|
||
if (overlay) closeModal(overlay.id);
|
||
});
|
||
});
|
||
// Escape key
|
||
document.addEventListener('keydown', (e) => {
|
||
if (e.key === 'Escape') {
|
||
document.querySelectorAll('.modal-overlay.open').forEach(o => closeModal(o.id));
|
||
}
|
||
});
|
||
}
|
||
/* ── QUIZ HOME ─────────────────────────────────────────────── */
|
||
(function () {
|
||
const FLOW = {
|
||
1: { desafio:'2a', objetivo:'2b', solucion:'2c', conocimiento:'2d' },
|
||
'2a': 3, '2b': 3, '2c': 3, '2d': 3,
|
||
3: 4,
|
||
4: 'result'
|
||
};
|
||
|
||
function buildResult(answers) {
|
||
const p1 = answers[1];
|
||
const p2 = answers['2a'] || answers['2b'] || answers['2c'] || answers['2d'];
|
||
const p3 = answers[3];
|
||
|
||
/* Perfil 4 · Requisito exigido */
|
||
if (p3 === 'requisito' || p2 === 'iso' || p2 === 'iso-form') {
|
||
return {
|
||
icon:'📋', profile:'Perfil · Requisito o certificación',
|
||
title:'La certificación puede ser el punto de partida.',
|
||
body:'Comprendemos que tenés un requisito externo. En IDE no trabajamos para cumplir auditorías: trabajamos para que el sistema refleje cómo funciona tu organización y contribuya a gestionarla mejor.',
|
||
chips:['IDE Excellence','ISO 9001 / 14001 / 45001','Sistemas de gestión'],
|
||
cta:'Ver soluciones Excellence', url:'soluciones.html'
|
||
};
|
||
}
|
||
|
||
/* Perfil 5 · Conocimiento o formación */
|
||
if (p1 === 'conocimiento') {
|
||
const map = {
|
||
'iso-form': { chips:['Auditoría interna','ISO 9001','Mejora continua'], extra:'IDE Excellence' },
|
||
'pm-form': { chips:['Gestión de proyectos','Metodologías ágiles','PMP'], extra:'IDE Project' },
|
||
'liderazgo-form':{ chips:['Liderazgo','Cambio organizacional','Cultura'], extra:'IDE Academy' },
|
||
'ia-form': { chips:['IA aplicada','Transformación digital','Automatización'], extra:'IDE Digital' }
|
||
};
|
||
const m = map[p2] || { chips:['Formación','Desarrollo','Academy'], extra:'IDE Academy' };
|
||
return {
|
||
icon:'🎓', profile:'Perfil · Formación y conocimiento',
|
||
title:'Desarrollamos las capacidades que hacen posible la transformación.',
|
||
body:'IDE Academy diseña programas de formación alineados con los desafíos reales de las organizaciones. No dictamos cursos estándar: trabajamos desde el contexto de cada equipo.',
|
||
chips:[...m.chips, m.extra], cta:'Conocer IDE Academy', url:'academy.html'
|
||
};
|
||
}
|
||
|
||
/* Perfil 3 · Sabe exactamente qué necesita */
|
||
if (p1 === 'solucion') {
|
||
const map = {
|
||
iso: { title:'Respuesta concreta. Y algo más.', chips:['ISO 9001','ISO 14001','IDE Excellence'], cta:'Ver soluciones ISO', url:'soluciones.html', body:'Sí, implementamos y acompañamos certificaciones ISO. Y creemos que un sistema de gestión debe reflejar cómo funciona tu organización, no solo superar una auditoría.' },
|
||
pmo: { title:'Proyectos que llegan a destino.', chips:['PMO','Gestión de proyectos','IDE Project'], cta:'Ver soluciones Project', url:'soluciones.html', body:'Diseñamos PMOs y acompañamos la dirección de proyectos para que se entreguen en tiempo, costo y con los resultados esperados.' },
|
||
formacion: { title:'Formación desde el contexto real.', chips:['In Company','Capacitación','IDE Academy'], cta:'Ver IDE Academy', url:'academy.html', body:'Programas de formación diseñados para tu organización, sus desafíos y las capacidades que necesita desarrollar.' },
|
||
'ia-digital':{ title:'Tecnología con propósito.', chips:['Transformación digital','IA aplicada','IDE Digital'], cta:'Ver soluciones Digital', url:'soluciones.html', body:'Te ayudamos a identificar dónde la IA y la digitalización generan valor real, y acompañamos su implementación de principio a fin.' }
|
||
};
|
||
const m = map[p2] || { title:'Encontramos lo que buscás.', chips:['Soluciones concretas','Ecosistema IDE'], cta:'Ver soluciones', url:'soluciones.html', body:'Tenemos la respuesta concreta que buscás. Y una mirada que asegura que esa solución genere valor en el conjunto de tu organización.' };
|
||
return { icon:'⚙️', profile:'Perfil · Solución concreta', ...m };
|
||
}
|
||
|
||
/* Perfil 2 · Sabe qué quiere lograr */
|
||
if (p1 === 'objetivo') {
|
||
const map = {
|
||
'mejorar-gestion': { chips:['IDE Excellence','Mejora de procesos'], body:'Entendemos dónde querés llegar. Antes de proponer una solución, comprendemos tu operación para intervenir donde hay mayor impacto.' },
|
||
'profesionalizar-proyectos':{ chips:['IDE Project','PMO'], body:'Traducimos tu objetivo en una estructura de gestión de proyectos adecuada a tu contexto, sin sobreingeniería.' },
|
||
'desarrollar-equipo': { chips:['IDE Academy','Formación In Company'], body:'Desarrollamos capacidades alineadas con los desafíos reales de tu organización. La formación parte del contexto, no de un catálogo estándar.' },
|
||
'transformar-digital': { chips:['IDE Digital','IA aplicada'], body:'Empezamos por entender tu organización para identificar dónde la tecnología realmente agrega valor, y avanzamos desde ahí.' }
|
||
};
|
||
const m = map[p2] || { chips:['Ecosistema IDE'], body:'Entendemos dónde querés llegar. Comprendemos el sistema para ayudarte a lograrlo.' };
|
||
return {
|
||
icon:'🎯', profile:'Perfil · Objetivo claro',
|
||
title:'Entendemos dónde querés llegar. Te ayudamos a definir cómo.',
|
||
body: m.body, chips: m.chips, cta:'Explorar por desafío', url:'desafios.html'
|
||
};
|
||
}
|
||
|
||
/* Perfil 1 · Desafío sin solución definida */
|
||
const mapD = {
|
||
gestion: { chips:['Procesos','Gestión','IDE Excellence'] },
|
||
proyectos: { chips:['Proyectos','PMO','IDE Project'] },
|
||
personas: { chips:['Capacidades','Equipo','IDE Academy'] },
|
||
tecnologia:{ chips:['IA','Digital','IDE Digital'] },
|
||
nosabe: { chips:['Diagnóstico sistémico','Ecosistema IDE'] }
|
||
};
|
||
const md = mapD[p2] || mapD.nosabe;
|
||
return {
|
||
icon:'🔍', profile:'Perfil · Desafío sin solución definida',
|
||
title:'No necesitás tener la respuesta para empezar.',
|
||
body:'Empezamos por comprender tu situación, no por ofrecerte una solución predeterminada. Eso diferencia una intervención puntual de una transformación real.',
|
||
chips: md.chips, cta:'Explorar desafíos', url:'desafios.html'
|
||
};
|
||
}
|
||
|
||
let currentStep = 1;
|
||
let stepHistory = [];
|
||
let answers = {};
|
||
const TOTAL = 4;
|
||
|
||
function showStep(id) {
|
||
document.querySelectorAll('.quiz-step').forEach(s => s.classList.remove('active'));
|
||
const el = document.getElementById('step-' + id);
|
||
if (el) el.classList.add('active');
|
||
updateProgress(id);
|
||
}
|
||
|
||
function updateProgress(id) {
|
||
const fill = document.getElementById('quizProgressFill');
|
||
const label = document.getElementById('quizProgressLabel');
|
||
const n = { 1:1, '2a':2, '2b':2, '2c':2, '2d':2, 3:3, 4:4, result:4 }[id] || 1;
|
||
fill.style.width = (n / TOTAL * 100) + '%';
|
||
label.textContent = id === 'result' ? '¡Listo!' : 'Pregunta ' + n + ' de ' + TOTAL;
|
||
}
|
||
|
||
function renderResult(ans) {
|
||
const r = buildResult(ans);
|
||
document.getElementById('resultIcon').textContent = r.icon;
|
||
document.getElementById('resultProfile').textContent = r.profile;
|
||
document.getElementById('resultTitle').textContent = r.title;
|
||
document.getElementById('resultBody').textContent = r.body;
|
||
document.getElementById('resultChips').innerHTML = r.chips.map(c =>
|
||
`<span class="result-chip">${c}</span>`).join('');
|
||
const cta = document.getElementById('resultCTA');
|
||
cta.textContent = r.cta;
|
||
cta.href = r.url;
|
||
showStep('result');
|
||
}
|
||
|
||
function handleOption(btn) {
|
||
const step = btn.dataset.step;
|
||
const val = btn.dataset.val;
|
||
btn.closest('.quiz-options').querySelectorAll('.quiz-opt')
|
||
.forEach(b => b.classList.remove('selected'));
|
||
btn.classList.add('selected');
|
||
answers[step] = val;
|
||
stepHistory.push(step);
|
||
setTimeout(() => {
|
||
const next = FLOW[step];
|
||
if (!next) return;
|
||
if (next === 'result') { renderResult(answers); return; }
|
||
showStep(typeof next === 'object' ? (next[val] || '2a') : next);
|
||
}, 220);
|
||
}
|
||
|
||
window.goBack = function () {
|
||
if (!stepHistory.length) return;
|
||
const prev = stepHistory.pop();
|
||
delete answers[prev];
|
||
if (['2a','2b','2c','2d'].includes(prev)) {
|
||
showStep(1);
|
||
} else {
|
||
showStep(stepHistory[stepHistory.length - 1] || 1);
|
||
}
|
||
};
|
||
|
||
window.restartQuiz = function () {
|
||
answers = {}; stepHistory = [];
|
||
document.querySelectorAll('.quiz-opt').forEach(b => b.classList.remove('selected'));
|
||
showStep(1);
|
||
};
|
||
|
||
document.addEventListener('DOMContentLoaded', function () {
|
||
document.querySelectorAll('.quiz-opt').forEach(btn => {
|
||
btn.addEventListener('click', () => handleOption(btn));
|
||
});
|
||
updateProgress(1);
|
||
});
|
||
})();
|
||
/* ── CONTACT FORM ─────────────────────────────────────────────── */
|
||
function initContactForm() {
|
||
const form = document.querySelector('.contact-form');
|
||
if (!form) return;
|
||
|
||
form.addEventListener('submit', (e) => {
|
||
e.preventDefault();
|
||
const btn = form.querySelector('[type="submit"]');
|
||
const original = btn.textContent;
|
||
btn.textContent = '✓ ¡Enviado!';
|
||
btn.disabled = true;
|
||
btn.style.background = '#1E9A7F';
|
||
setTimeout(() => {
|
||
btn.textContent = original;
|
||
btn.disabled = false;
|
||
btn.style.background = '';
|
||
form.reset();
|
||
}, 3000);
|
||
});
|
||
}
|
||
|
||
/* ── ACCORDION / DESAFÍOS ─────────────────────────────────────── */
|
||
function initAccordion() {
|
||
document.querySelectorAll('.accordion-trigger').forEach(trigger => {
|
||
trigger.addEventListener('click', () => {
|
||
const panel = trigger.nextElementSibling;
|
||
const isOpen = panel.classList.contains('open');
|
||
|
||
// Close all
|
||
document.querySelectorAll('.accordion-panel').forEach(p => p.classList.remove('open'));
|
||
document.querySelectorAll('.accordion-trigger').forEach(t => t.classList.remove('open'));
|
||
|
||
if (!isOpen) {
|
||
panel.classList.add('open');
|
||
trigger.classList.add('open');
|
||
}
|
||
});
|
||
});
|
||
}
|
||
|
||
/* ── FILTER TABS ──────────────────────────────────────────────── */
|
||
function initFilterTabs() {
|
||
document.querySelectorAll('.filter-tab').forEach(tab => {
|
||
tab.addEventListener('click', () => {
|
||
const group = tab.closest('.filter-tabs');
|
||
group.querySelectorAll('.filter-tab').forEach(t => t.classList.remove('active'));
|
||
tab.classList.add('active');
|
||
|
||
const filter = tab.dataset.filter;
|
||
document.querySelectorAll('.filterable').forEach(item => {
|
||
if (filter === 'all' || item.dataset.cat === filter) {
|
||
item.style.display = '';
|
||
} else {
|
||
item.style.display = 'none';
|
||
}
|
||
});
|
||
});
|
||
});
|
||
}
|
||
|
||
/* ── INIT ─────────────────────────────────────────────────────── */
|
||
document.addEventListener('DOMContentLoaded', () => {
|
||
initThemeToggle();
|
||
initHamburger();
|
||
initActiveNav();
|
||
initFadeIn();
|
||
initModals();
|
||
initContactForm();
|
||
initAccordion();
|
||
initFilterTabs();
|
||
});
|