git.admin/roi-theme
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: reorganizar openspec y planificacion con spec recaptcha

Browse Source 
- renombrar openspec/ a _openspec/ (carpeta auxiliar)
- mover specs de features a changes/
- crear specs base: arquitectura-limpia, estandares-codigo, nomenclatura
- migrar _planificacion/ con design-system y roi-theme-template
- agregar especificacion recaptcha anti-spam (proposal, tasks, spec)
- corregir rutas y referencias en todas las specs

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
FrankZamora
2026-01-08 15:30:45 -06:00
parent 0d6b6db108
commit 0f6387ab46
58 changed files with 15364 additions and 1171 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1121
_planificacion/roi-theme-template/css/style.css Normal file
View File

File diff suppressed because it is too large Load Diff

BIN
_planificacion/roi-theme-template/img/featured-image.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 256 KiB

1159
_planificacion/roi-theme-template/index.html Normal file
View File

File diff suppressed because it is too large Load Diff

317
_planificacion/roi-theme-template/js/main.js Normal file
View File

@@ -0,0 +1,317 @@
/**
* APU MÉXICO - MAIN JAVASCRIPT
*/
// Navbar scroll effect
window.addEventListener('scroll', function() {
const navbar = document.querySelector('.navbar');
if (navbar) {
if (window.scrollY > 50) {
navbar.classList.add('scrolled');
} else {
navbar.classList.remove('scrolled');
}
}
});
// Table of Contents - ScrollSpy
function updateActiveSection() {
const tocLinks = document.querySelectorAll('.toc-container a');
if (!tocLinks.length) return;
const navbar = document.querySelector('.navbar');
const navbarHeight = navbar ? navbar.offsetHeight : 0;
const sectionIds = Array.from(tocLinks).map(link => {
const href = link.getAttribute('href');
return href ? href.substring(1) : null;
}).filter(id => id !== null);
const sections = sectionIds.map(id => document.getElementById(id)).filter(el => el !== null);
const scrollPosition = window.scrollY + navbarHeight + 100;
let activeSection = null;
for (let i = 0; i < sections.length; i++) {
const section = sections[i];
const sectionTop = section.offsetTop;
if (scrollPosition >= sectionTop) {
activeSection = section.getAttribute('id');
} else {
break;
}
}
tocLinks.forEach(link => {
link.classList.remove('active');
const href = link.getAttribute('href');
if (href === '#' + activeSection) {
link.classList.add('active');
}
});
}
// Smooth scroll for TOC links
document.addEventListener('DOMContentLoaded', function() {
document.querySelectorAll('.toc-container a').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
const targetId = this.getAttribute('href');
const targetElement = document.querySelector(targetId);
if (targetElement) {
const navbar = document.querySelector('.navbar');
const navbarHeight = navbar ? navbar.offsetHeight : 0;
const offsetTop = targetElement.offsetTop - navbarHeight - 40;
window.scrollTo({
top: offsetTop,
behavior: 'smooth'
});
}
});
});
updateActiveSection();
});
window.addEventListener('scroll', updateActiveSection);
// A/B Testing for CTA sections
document.addEventListener('DOMContentLoaded', function() {
const ctaVariant = Math.random() < 0.5 ? 'A' : 'B';
if (ctaVariant === 'A') {
const variantA = document.querySelector('.cta-variant-a');
if (variantA) variantA.style.display = 'block';
} else {
const variantB = document.querySelector('.cta-variant-b');
if (variantB) variantB.style.display = 'block';
}
document.querySelectorAll('.cta-button').forEach(button => {
button.addEventListener('click', function() {
const variant = this.getAttribute('data-cta-variant');
console.log('CTA clicked - Variant: ' + variant);
if (typeof gtag !== 'undefined') {
gtag('event', 'cta_click', {
'event_category': 'CTA',
'event_label': 'Variant_' + variant,
'value': variant
});
}
});
});
});
// Contact Modal - Dynamic Loading
function loadContactModal() {
const modalContainer = document.getElementById('modalContainer');
if (!modalContainer) return;
fetch('modal-contact.html')
.then(response => response.text())
.then(html => {
modalContainer.innerHTML = html;
initContactForm();
})
.catch(error => {
console.error('Error loading modal:', error);
});
}
document.addEventListener('DOMContentLoaded', loadContactModal);
// Contact Form - Webhook Submission
function initContactForm() {
const form = document.getElementById('contactForm');
if (!form) return;
form.addEventListener('submit', function(e) {
e.preventDefault();
const WEBHOOK_URL = 'https://tu-webhook.com/contacto';
const formData = {
fullName: document.getElementById('fullName').value,
company: document.getElementById('company').value,
whatsapp: document.getElementById('whatsapp').value,
email: document.getElementById('email').value,
comments: document.getElementById('comments').value,
timestamp: new Date().toISOString(),
source: 'APU Website - Modal'
};
if (!formData.fullName || !formData.whatsapp || !formData.email) {
showFormMessage('Por favor completa todos los campos requeridos', 'danger');
return;
}
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!emailRegex.test(formData.email)) {
showFormMessage('Por favor ingresa un correo electrónico válido', 'danger');
return;
}
const submitButton = form.querySelector('button[type="submit"]');
const originalText = submitButton.innerHTML;
submitButton.disabled = true;
submitButton.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>Enviando...';
fetch(WEBHOOK_URL, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(formData)
})
.then(response => {
if (!response.ok) throw new Error('Error en el envío');
return response.json();
})
.then(data => {
showFormMessage('¡Mensaje enviado exitosamente!', 'success');
form.reset();
if (typeof gtag !== 'undefined') {
gtag('event', 'form_submission', {
'event_category': 'Contact Form',
'event_label': 'Form Submitted'
});
}
setTimeout(() => {
const modal = bootstrap.Modal.getInstance(document.getElementById('contactModal'));
if (modal) modal.hide();
}, 2000);
})
.catch(error => {
showFormMessage('Error al enviar el mensaje', 'danger');
})
.finally(() => {
submitButton.disabled = false;
submitButton.innerHTML = originalText;
});
});
}
function showFormMessage(message, type) {
const messageDiv = document.getElementById('formMessage');
if (!messageDiv) return;
messageDiv.textContent = message;
messageDiv.className = `mt-3 alert alert-${type}`;
messageDiv.style.display = 'block';
setTimeout(() => {
messageDiv.style.display = 'none';
}, 5000);
}
// Footer Contact Form
document.addEventListener('DOMContentLoaded', function() {
const footerForm = document.getElementById('footerContactForm');
if (!footerForm) return;
footerForm.addEventListener('submit', function(e) {
e.preventDefault();
const WEBHOOK_URL = 'https://tu-webhook.com/contacto';
const formData = {
fullName: document.getElementById('footerFullName').value,
company: document.getElementById('footerCompany').value,
whatsapp: document.getElementById('footerWhatsapp').value,
email: document.getElementById('footerEmail').value,
comments: document.getElementById('footerComments').value,
timestamp: new Date().toISOString(),
source: 'APU Website - Footer'
};
if (!formData.fullName || !formData.whatsapp || !formData.email) {
showFooterFormMessage('Por favor completa todos los campos requeridos', 'danger');
return;
}
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!emailRegex.test(formData.email)) {
showFooterFormMessage('Por favor ingresa un correo válido', 'danger');
return;
}
const submitButton = footerForm.querySelector('button[type="submit"]');
const originalText = submitButton.innerHTML;
submitButton.disabled = true;
submitButton.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>Enviando...';
fetch(WEBHOOK_URL, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(formData)
})
.then(response => {
if (!response.ok) throw new Error('Error en el envío');
return response.json();
})
.then(data => {
showFooterFormMessage('¡Mensaje enviado exitosamente!', 'success');
footerForm.reset();
if (typeof gtag !== 'undefined') {
gtag('event', 'form_submission', {
'event_category': 'Footer Form',
'event_label': 'Form Submitted'
});
}
})
.catch(error => {
showFooterFormMessage('Error al enviar el mensaje', 'danger');
})
.finally(() => {
submitButton.disabled = false;
submitButton.innerHTML = originalText;
});
});
});
function showFooterFormMessage(message, type) {
const messageDiv = document.getElementById('footerFormMessage');
if (!messageDiv) return;
messageDiv.textContent = message;
messageDiv.className = `col-12 mt-2 alert alert-${type}`;
messageDiv.style.display = 'block';
setTimeout(() => {
messageDiv.style.display = 'none';
}, 5000);
}
// Smooth scroll for all anchor links
document.addEventListener('DOMContentLoaded', function() {
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
const href = this.getAttribute('href');
if (href === '#' || this.getAttribute('data-bs-toggle') === 'modal') {
return;
}
const targetElement = document.querySelector(href);
if (!targetElement) return;
e.preventDefault();
const navbar = document.querySelector('.navbar');
const navbarHeight = navbar ? navbar.offsetHeight : 0;
const offsetTop = targetElement.offsetTop - navbarHeight - 20;
window.scrollTo({
top: offsetTop,
behavior: 'smooth'
});
});
});
});
console.log('%c APU México ', 'background: #1e3a5f; color: #FF8600; font-size: 16px; font-weight: bold; padding: 10px;');

42
_planificacion/roi-theme-template/modal-contact.html Normal file
View File

@@ -0,0 +1,42 @@
<!-- Contact Modal -->
<div class="modal fade" id="contactModal" tabindex="-1" aria-labelledby="contactModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header border-0">
<h5 class="modal-title fw-bold" id="contactModalLabel">¿Listo para comenzar?</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body px-4 pb-4">
<p class="text-muted mb-4">Completa el formulario y nos pondremos en contacto contigo lo antes posible.</p>
<form id="contactForm">
<div class="mb-3">
<label for="fullName" class="form-label">Nombre completo <span class="text-danger">*</span></label>
<input type="text" class="form-control" id="fullName" name="fullName" required>
</div>
<div class="mb-3">
<label for="company" class="form-label">Empresa</label>
<input type="text" class="form-control" id="company" name="company">
</div>
<div class="mb-3">
<label for="whatsapp" class="form-label">WhatsApp <span class="text-danger">*</span></label>
<input type="tel" class="form-control" id="whatsapp" name="whatsapp" placeholder="+52 ___ ___ ____" required>
</div>
<div class="mb-3">
<label for="email" class="form-label">Correo electrónico <span class="text-danger">*</span></label>
<input type="email" class="form-control" id="email" name="email" required>
</div>
<div class="mb-3">
<label for="comments" class="form-label">Comentarios</label>
<textarea class="form-control" id="comments" name="comments" rows="3"></textarea>
</div>
<div class="d-grid">
<button type="submit" class="btn btn-submit-form btn-lg">
Enviar
</button>
</div>
<div id="formMessage" class="mt-3 alert" style="display: none;"></div>
</form>
</div>
</div>
</div>
</div>