version 1
This commit is contained in:
+150
@@ -0,0 +1,150 @@
|
||||
// ===== 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 = '−';
|
||||
}
|
||||
}
|
||||
|
||||
// ===== COTIZADOR =====
|
||||
const answers = [null, null, null];
|
||||
let current = 0;
|
||||
|
||||
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 updateProgress() {
|
||||
for (let i = 0; i < 3; i++) {
|
||||
document.getElementById('p' + (i + 1)).style.width = i <= current ? '100%' : '0%';
|
||||
}
|
||||
}
|
||||
|
||||
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 = '';
|
||||
}
|
||||
}
|
||||
|
||||
// ===== 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;
|
||||
}
|
||||
Reference in New Issue
Block a user