mejoras de estructura
This commit is contained in:
+110
-138
@@ -1,150 +1,122 @@
|
||||
// ===== MENU =====
|
||||
function toggleMenu() {
|
||||
document.getElementById('sheet').classList.toggle('open');
|
||||
document.getElementById('overlay').classList.toggle('open');
|
||||
}
|
||||
|
||||
// ===== TABS =====
|
||||
function showTab(i, el) {
|
||||
document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
|
||||
document.querySelectorAll('.panel').forEach(p => p.classList.remove('active'));
|
||||
el.classList.add('active');
|
||||
document.querySelector('.panel[data-panel="' + i + '"]').classList.add('active');
|
||||
}
|
||||
|
||||
// ===== ACCORDION =====
|
||||
function toggleAcc(head) {
|
||||
const item = head.parentElement;
|
||||
document.querySelectorAll('.acc-item').forEach(i => { if (i !== item) i.classList.remove('open'); });
|
||||
item.classList.toggle('open');
|
||||
}
|
||||
|
||||
// ===== FAQ =====
|
||||
function toggleFaq(head) {
|
||||
const item = head.parentElement;
|
||||
const isOpen = item.classList.contains('open');
|
||||
document.querySelectorAll('.faq-item').forEach(i => {
|
||||
i.classList.remove('open');
|
||||
const t = i.querySelector('.faq-toggle');
|
||||
if (t) t.textContent = '+';
|
||||
});
|
||||
if (!isOpen) {
|
||||
item.classList.add('open');
|
||||
const toggle = item.querySelector('.faq-toggle');
|
||||
if (toggle) toggle.textContent = '−';
|
||||
/* ============================================
|
||||
CARGA DE INCLUDES (menu y footer)
|
||||
============================================ */
|
||||
async function loadInclude(selector, url) {
|
||||
try {
|
||||
const response = await fetch(url);
|
||||
if (!response.ok) throw new Error(`HTTP ${response.status}`);
|
||||
const html = await response.text();
|
||||
const container = document.querySelector(selector);
|
||||
if (container) container.innerHTML = html;
|
||||
} catch (error) {
|
||||
console.error(`Error cargando ${url}:`, error);
|
||||
}
|
||||
}
|
||||
|
||||
// ===== COTIZADOR =====
|
||||
const answers = [null, null, null];
|
||||
let current = 0;
|
||||
/* ============================================
|
||||
SWITCH DE TEMA (claro por defecto)
|
||||
============================================ */
|
||||
function initTheme() {
|
||||
const savedTheme = localStorage.getItem('theme') || 'light';
|
||||
document.documentElement.setAttribute('data-theme', savedTheme);
|
||||
}
|
||||
|
||||
document.querySelectorAll('.opt').forEach(opt => {
|
||||
opt.addEventListener('click', function() {
|
||||
const group = this.parentElement;
|
||||
const q = parseInt(group.dataset.q);
|
||||
group.querySelectorAll('.opt').forEach(o => o.classList.remove('selected'));
|
||||
this.classList.add('selected');
|
||||
answers[q] = parseInt(this.dataset.val);
|
||||
document.getElementById('next' + q).disabled = false;
|
||||
const step = this.closest('.step');
|
||||
const qNum = step.querySelector('.q-num');
|
||||
if (qNum) qNum.classList.add('active');
|
||||
});
|
||||
function toggleTheme() {
|
||||
const current = document.documentElement.getAttribute('data-theme') || 'light';
|
||||
const next = current === 'dark' ? 'light' : 'dark';
|
||||
document.documentElement.setAttribute('data-theme', next);
|
||||
localStorage.setItem('theme', next);
|
||||
}
|
||||
|
||||
// Ejecutar al cargar la página
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
initTheme();
|
||||
|
||||
const themeBtn = document.querySelector('.theme-toggle');
|
||||
if (themeBtn) {
|
||||
themeBtn.addEventListener('click', toggleTheme);
|
||||
}
|
||||
});
|
||||
/* ============================================
|
||||
CALCULAR ANCHO DEL SCROLLBAR
|
||||
============================================ */
|
||||
function getScrollbarWidth() {
|
||||
return window.innerWidth - document.documentElement.clientWidth;
|
||||
}
|
||||
|
||||
function updateProgress() {
|
||||
for (let i = 0; i < 3; i++) {
|
||||
document.getElementById('p' + (i + 1)).style.width = i <= current ? '100%' : '0%';
|
||||
function applyScrollbarCompensation() {
|
||||
const scrollbarWidth = getScrollbarWidth();
|
||||
document.documentElement.style.setProperty('--scrollbar-width', `${scrollbarWidth}px`);
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
MENÚ FULLSCREEN
|
||||
============================================ */
|
||||
function openMenu() {
|
||||
const menu = document.getElementById('fullscreen-menu');
|
||||
const overlay = document.getElementById('menu-overlay');
|
||||
const menuToggle = document.querySelector('.menu-toggle');
|
||||
|
||||
if (menu && overlay) {
|
||||
applyScrollbarCompensation();
|
||||
menu.classList.add('is-open');
|
||||
overlay.classList.add('is-open');
|
||||
document.body.classList.add('menu-open');
|
||||
menuToggle.setAttribute('aria-expanded', 'true');
|
||||
}
|
||||
}
|
||||
|
||||
function next() {
|
||||
document.querySelector('.step[data-step="' + current + '"]').classList.remove('active');
|
||||
current++;
|
||||
document.querySelector('.step[data-step="' + current + '"]').classList.add('active');
|
||||
updateProgress();
|
||||
}
|
||||
|
||||
function prev() {
|
||||
document.querySelector('.step[data-step="' + current + '"]').classList.remove('active');
|
||||
current--;
|
||||
document.querySelector('.step[data-step="' + current + '"]').classList.add('active');
|
||||
updateProgress();
|
||||
}
|
||||
|
||||
const plans = [
|
||||
{ name: 'Esencial', price: '$250.000 ARS', desc: 'Ideal para arrancar con presencia digital profesional y consistente, sin sobre-invertir todavía.' },
|
||||
{ name: 'Impulso', price: '$420.000 ARS', desc: 'Pensado para marcas en crecimiento que necesitan más alcance, leads y una primera campaña de publicidad.' },
|
||||
{ name: 'Premium', price: '$650.000 ARS + pauta', desc: 'Nuestro plan más recomendado: gestión integral de contenido, publicidad y estrategia para consolidar y expandir.' },
|
||||
{ name: 'Elite', price: '$1.000.000 ARS', desc: 'Máximo posicionamiento y gestión de marca completa, para negocios listos para escalar en serio.' }
|
||||
];
|
||||
|
||||
function showResult() {
|
||||
document.querySelector('.step[data-step="2"]').classList.remove('active');
|
||||
const avg = Math.round((answers[0] + answers[1] + answers[2]) / 3);
|
||||
const idx = Math.min(Math.max(avg - 1, 0), 3);
|
||||
document.getElementById('rp-name').textContent = plans[idx].name;
|
||||
document.getElementById('rp-price').innerHTML = plans[idx].price + ' <small>/ mes</small>';
|
||||
document.getElementById('rp-desc').textContent = plans[idx].desc;
|
||||
document.getElementById('result').classList.add('active');
|
||||
}
|
||||
|
||||
function restart() {
|
||||
answers[0] = answers[1] = answers[2] = null;
|
||||
current = 0;
|
||||
document.querySelectorAll('.opt').forEach(o => o.classList.remove('selected'));
|
||||
document.querySelectorAll('[id^="next"]').forEach(b => b.disabled = true);
|
||||
document.querySelectorAll('.q-num').forEach(q => q.classList.remove('active'));
|
||||
document.getElementById('result').classList.remove('active');
|
||||
document.querySelectorAll('.step').forEach(s => s.classList.remove('active'));
|
||||
document.querySelector('.step[data-step="0"]').classList.add('active');
|
||||
updateProgress();
|
||||
}
|
||||
|
||||
// ===== FILTRO DE SERVICIOS EN CONTACTO =====
|
||||
function selectFilter(event) {
|
||||
const el = event.currentTarget;
|
||||
const container = el.parentElement;
|
||||
container.querySelectorAll('.filter-tag').forEach(t => t.classList.remove('active'));
|
||||
el.classList.add('active');
|
||||
const value = el.dataset.value;
|
||||
document.getElementById('servicioSeleccionado').value = value;
|
||||
const otroInput = document.getElementById('servicioOtro');
|
||||
if (value === 'otro') {
|
||||
otroInput.style.display = 'block';
|
||||
otroInput.required = true;
|
||||
} else {
|
||||
otroInput.style.display = 'none';
|
||||
otroInput.required = false;
|
||||
otroInput.value = '';
|
||||
function closeMenu() {
|
||||
const menu = document.getElementById('fullscreen-menu');
|
||||
const overlay = document.getElementById('menu-overlay');
|
||||
const menuToggle = document.querySelector('.menu-toggle');
|
||||
|
||||
if (menu && overlay) {
|
||||
menu.classList.remove('is-open');
|
||||
overlay.classList.remove('is-open');
|
||||
document.body.classList.remove('menu-open');
|
||||
menuToggle.setAttribute('aria-expanded', 'false');
|
||||
}
|
||||
}
|
||||
|
||||
// ===== FORMULARIO =====
|
||||
function handleSubmit(e) {
|
||||
e.preventDefault();
|
||||
const form = document.getElementById('contactForm');
|
||||
const data = new FormData(form);
|
||||
const nombre = data.get('nombre');
|
||||
const email = data.get('email');
|
||||
const mensaje = data.get('mensaje');
|
||||
if (!nombre || !email || !mensaje) {
|
||||
alert('Por favor, completá todos los campos obligatorios.');
|
||||
return false;
|
||||
}
|
||||
const btn = form.querySelector('button[type="submit"]');
|
||||
const originalText = btn.textContent;
|
||||
btn.textContent = 'Enviando...';
|
||||
btn.disabled = true;
|
||||
setTimeout(() => {
|
||||
alert('¡Mensaje enviado con éxito! Te responderemos a la brevedad.');
|
||||
form.reset();
|
||||
btn.textContent = originalText;
|
||||
btn.disabled = false;
|
||||
document.querySelectorAll('.filter-tag').forEach(t => t.classList.remove('active'));
|
||||
document.querySelector('.filter-tag[data-value="todos"]').classList.add('active');
|
||||
document.getElementById('servicioOtro').style.display = 'none';
|
||||
}, 1500);
|
||||
return false;
|
||||
}
|
||||
/* ============================================
|
||||
INICIALIZACIÓN
|
||||
============================================ */
|
||||
document.addEventListener('DOMContentLoaded', async () => {
|
||||
// Cargar menú y footer
|
||||
await Promise.all([
|
||||
loadInclude('#menu-container', 'includes/menu.html'),
|
||||
loadInclude('#footer-container', 'includes/footer.html')
|
||||
]);
|
||||
|
||||
// Inicializar tema
|
||||
initTheme();
|
||||
|
||||
// Eventos del tema
|
||||
const themeBtn = document.querySelector('.theme-toggle');
|
||||
if (themeBtn) themeBtn.addEventListener('click', toggleTheme);
|
||||
|
||||
// Eventos del menú
|
||||
const menuToggle = document.querySelector('.menu-toggle');
|
||||
const menuClose = document.querySelector('.menu-close');
|
||||
const menuOverlay = document.getElementById('menu-overlay');
|
||||
const menuLinks = document.querySelectorAll('.fullscreen-menu a');
|
||||
|
||||
if (menuToggle) menuToggle.addEventListener('click', openMenu);
|
||||
if (menuClose) menuClose.addEventListener('click', closeMenu);
|
||||
if (menuOverlay) menuOverlay.addEventListener('click', closeMenu);
|
||||
|
||||
// Cerrar menú al hacer clic en un enlace
|
||||
menuLinks.forEach(link => {
|
||||
link.addEventListener('click', closeMenu);
|
||||
});
|
||||
|
||||
// Cerrar menú con tecla Escape
|
||||
document.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Escape') closeMenu();
|
||||
});
|
||||
|
||||
// Año dinámico en el footer
|
||||
const yearEl = document.getElementById('current-year');
|
||||
if (yearEl) yearEl.textContent = new Date().getFullYear();
|
||||
});
|
||||
Reference in New Issue
Block a user