[NIVEL 2 AVANCE] Issues #49-#53 - Componentes Principales Verificados
Todos los componentes del NIVEL 2 ya están implementados correctamente: - ✅ Notification Bar (#49) - ✅ Navbar (#50) - ✅ Hero Section (#51) - ✅ Sidebar (#52) - ✅ Footer (#53) Solo se actualizó notification-bar.css para usar variables CSS. Próximo paso: NIVEL 3 (Refinamientos visuales) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
FrankZamora
2158
_planeacion/theme-template/THEME-DOCUMENTATION.md
Normal file
2158
_planeacion/theme-template/THEME-DOCUMENTATION.md
Normal file
File diff suppressed because it is too large
Load Diff
824
_planeacion/theme-template/css/style.css
Normal file
824
_planeacion/theme-template/css/style.css
Normal file
@@ -0,0 +1,824 @@
|
||||
/* Custom Styles */
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
/* TOP NOTIFICATION BAR */
|
||||
.top-notification-bar {
|
||||
background-color: #4C5C6B;
|
||||
color: #ffffff;
|
||||
padding: 0.5rem 0;
|
||||
font-size: 0.9rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.top-notification-bar a {
|
||||
color: #ffffff;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.top-notification-bar a:hover {
|
||||
color: #61c7cd;
|
||||
}
|
||||
|
||||
.top-notification-bar i {
|
||||
color: #61c7cd;
|
||||
}
|
||||
|
||||
.top-notification-bar strong {
|
||||
color: #61c7cd;
|
||||
}
|
||||
|
||||
/* MEJORAS NAVBAR */
|
||||
.navbar {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 1030;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.15);
|
||||
background-color: #0E2337 !important;
|
||||
}
|
||||
|
||||
.navbar.scrolled {
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.25);
|
||||
}
|
||||
|
||||
.navbar-brand b {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
position: relative;
|
||||
transition: all 0.3s ease;
|
||||
padding: 0.5rem 1rem !important;
|
||||
font-weight: 500;
|
||||
color: rgba(255, 255, 255, 0.9) !important;
|
||||
}
|
||||
|
||||
.nav-link::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%) scaleX(0);
|
||||
width: 80%;
|
||||
height: 2px;
|
||||
background: #61c7cd;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.nav-link:hover {
|
||||
color: #61c7cd !important;
|
||||
background-color: rgba(97, 199, 205, 0.1);
|
||||
border-radius: 4px;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.nav-link:hover::after {
|
||||
transform: translateX(-50%) scaleX(1);
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
border: none;
|
||||
box-shadow: 0 8px 24px rgba(0,0,0,0.12);
|
||||
border-radius: 8px;
|
||||
animation: slideDown 0.3s ease;
|
||||
}
|
||||
|
||||
@keyframes slideDown {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-item {
|
||||
padding: 0.75rem 1.5rem;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.dropdown-item:hover {
|
||||
background-color: rgba(97, 199, 205, 0.1);
|
||||
color: #61c7cd;
|
||||
transform: translateX(5px);
|
||||
}
|
||||
|
||||
/* Dropdown toggle color */
|
||||
.navbar-dark .navbar-nav .nav-link.dropdown-toggle {
|
||||
color: rgba(255, 255, 255, 0.9) !important;
|
||||
}
|
||||
|
||||
.navbar-dark .navbar-nav .nav-link.dropdown-toggle:hover {
|
||||
color: #61c7cd !important;
|
||||
}
|
||||
|
||||
/* OPCIÓN 03: MODERNO Y PROFESIONAL - H1 HERO */
|
||||
.hero-title {
|
||||
background: linear-gradient(135deg, #1e3a5f 0%, #2c5282 100%);
|
||||
box-shadow: 0 4px 16px rgba(30, 58, 95, 0.25);
|
||||
}
|
||||
|
||||
.hero-title h1 {
|
||||
color: #ffffff !important;
|
||||
font-weight: 700;
|
||||
line-height: 1.4;
|
||||
text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
.post-title-container h1 {
|
||||
font-size: 2.8rem;
|
||||
font-weight: 700;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.featured-image-container {
|
||||
border-radius: 0.5rem;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
/* MEJORAS TOC */
|
||||
.toc-container {
|
||||
top: 5rem;
|
||||
background: #f8f9fa;
|
||||
border: 1px solid #e9ecef;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 4px 16px rgba(0,0,0,0.08);
|
||||
transition: all 0.3s ease;
|
||||
padding: 1rem 1.25rem;
|
||||
}
|
||||
|
||||
.toc-container:hover {
|
||||
box-shadow: 0 8px 24px rgba(0,0,0,0.12);
|
||||
}
|
||||
|
||||
.toc-container h4 {
|
||||
color: #2c3e50;
|
||||
padding-bottom: 12px;
|
||||
border-bottom: 3px solid #0d6efd;
|
||||
margin-bottom: 1rem;
|
||||
font-weight: 700;
|
||||
text-align: center;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.toc-container ol {
|
||||
padding-left: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.toc-container li {
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.toc-container a,
|
||||
.toc-container .list-unstyled a {
|
||||
display: block;
|
||||
padding: 0.375rem 1rem;
|
||||
color: #495057;
|
||||
text-decoration: none;
|
||||
border-left: 3px solid transparent;
|
||||
transition: all 0.3s ease;
|
||||
border-radius: 4px;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.toc-container a:hover,
|
||||
.toc-container .list-unstyled a:hover {
|
||||
background: linear-gradient(90deg, rgba(13, 110, 253, 0.08), transparent);
|
||||
border-left-color: #0d6efd;
|
||||
color: #0d6efd;
|
||||
padding-left: 1.5rem;
|
||||
}
|
||||
|
||||
.toc-container a.active {
|
||||
background: linear-gradient(90deg, rgba(13, 110, 253, 0.12), transparent);
|
||||
border-left-color: #0d6efd;
|
||||
color: #0d6efd;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* POST CONTENT */
|
||||
.post-content h2 {
|
||||
font-size: 2rem;
|
||||
font-weight: 600;
|
||||
margin-top: 2.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
border-bottom: 1px solid #eee;
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.post-content h3 {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
margin-top: 2rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.post-content p, .post-content li {
|
||||
line-height: 1.8;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
/* OPCIÓN 03: MODERNO Y PROFESIONAL - CARDS GRISES */
|
||||
.related-posts .card {
|
||||
cursor: pointer;
|
||||
background: #f8f9fa !important;
|
||||
border: 1px solid #dee2e6 !important;
|
||||
border-left: 4px solid #6c757d !important;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.related-posts .card:hover {
|
||||
background: #ffffff !important;
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
|
||||
border-left-color: #0d6efd !important;
|
||||
}
|
||||
|
||||
.related-posts .card-body {
|
||||
padding: 2rem !important;
|
||||
}
|
||||
|
||||
.related-posts .card-title {
|
||||
color: #495057 !important;
|
||||
font-weight: 600;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
/* PAGINACIÓN PROFESIONAL */
|
||||
.pagination .page-link {
|
||||
color: #495057;
|
||||
border: 1px solid #dee2e6;
|
||||
padding: 0.5rem 1rem;
|
||||
margin: 0 0.25rem;
|
||||
border-radius: 4px;
|
||||
font-weight: 500;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.pagination .page-link:hover {
|
||||
background-color: #f8f9fa;
|
||||
border-color: #0d6efd;
|
||||
color: #0d6efd;
|
||||
}
|
||||
|
||||
.pagination .page-item.active .page-link {
|
||||
background-color: #1e3a5f;
|
||||
border-color: #1e3a5f;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
/* TABLAS DE ANÁLISIS DE PRECIOS UNITARIOS - USABILIDAD MEJORADA */
|
||||
.analisis {
|
||||
margin: 2rem 0;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.analisis table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
background: #ffffff;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
border: none;
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
/* Eliminar todos los bordes */
|
||||
.analisis table td {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.analisis table tbody {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.analisis table tr {
|
||||
border: none;
|
||||
}
|
||||
|
||||
/* Anchos fijos para las columnas */
|
||||
.analisis table td:nth-child(1) {
|
||||
width: 150px;
|
||||
}
|
||||
|
||||
.analisis table td:nth-child(2) {
|
||||
width: auto;
|
||||
min-width: 300px;
|
||||
}
|
||||
|
||||
.analisis table td:nth-child(3) {
|
||||
width: 80px;
|
||||
}
|
||||
|
||||
.analisis table td:nth-child(4) {
|
||||
width: 110px;
|
||||
}
|
||||
|
||||
.analisis table td:nth-child(5) {
|
||||
width: 120px;
|
||||
}
|
||||
|
||||
.analisis table td:nth-child(6) {
|
||||
width: 120px;
|
||||
}
|
||||
|
||||
/* Encabezados de tabla con fondo oscuro y texto centrado */
|
||||
.analisis table thead tr th {
|
||||
background: linear-gradient(135deg, #1e3a5f 0%, #2c5282 100%);
|
||||
color: #ffffff;
|
||||
font-weight: 600;
|
||||
text-align: center !important;
|
||||
padding: 1rem;
|
||||
border: none;
|
||||
}
|
||||
|
||||
/* Filas normales con padding adecuado */
|
||||
.analisis table tbody td {
|
||||
padding: 0.75rem 1rem;
|
||||
border: none;
|
||||
}
|
||||
|
||||
/* Zebra striping - filas con colores alternados */
|
||||
.analisis table tbody tr:nth-child(even):not(.section-header):not(.subtotal-row):not(.total-row) {
|
||||
background-color: #f8f9fa;
|
||||
}
|
||||
|
||||
.analisis table tbody tr:nth-child(odd):not(.section-header):not(.subtotal-row):not(.total-row) {
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
/* Alineación de columnas */
|
||||
.analisis table td:nth-child(1) {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.analisis table td:nth-child(2) {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
/* Columna Unidad (3) centrada */
|
||||
.analisis table td:nth-child(3),
|
||||
.analisis table td.c3 {
|
||||
text-align: center !important;
|
||||
color: #6c757d;
|
||||
}
|
||||
|
||||
/* Columnas monetarias a la derecha */
|
||||
.analisis table td:nth-child(4),
|
||||
.analisis table td.c4,
|
||||
.analisis table td:nth-child(5),
|
||||
.analisis table td.c5,
|
||||
.analisis table td:nth-child(6),
|
||||
.analisis table td.c6 {
|
||||
text-align: right !important;
|
||||
font-family: 'Courier New', monospace;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* Hover en filas de datos para mejor identificación */
|
||||
.analisis table tbody tr:not(.section-header):not(.subtotal-row):not(.total-row):hover {
|
||||
background-color: #fff3cd !important;
|
||||
transition: background-color 0.2s ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Encabezados de sección (Material, Mano de Obra, Herramienta, Equipo) */
|
||||
.analisis table tr.section-header {
|
||||
background-color: #e9ecef !important;
|
||||
}
|
||||
|
||||
.analisis table tr.section-header td {
|
||||
font-weight: 600;
|
||||
color: #1e3a5f;
|
||||
padding: 0.75rem 1rem;
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
/* Filas de subtotales (Suma de Material, Suma de Mano de Obra, etc) */
|
||||
.analisis table tr.subtotal-row {
|
||||
background-color: #d1e7fd !important;
|
||||
}
|
||||
|
||||
.analisis table tr.subtotal-row td {
|
||||
font-weight: 700;
|
||||
color: #0d47a1;
|
||||
padding: 0.875rem 1rem;
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
.analisis table tr.subtotal-row td.c6 {
|
||||
font-size: 1.05rem;
|
||||
}
|
||||
|
||||
/* Fila de Costo Directo (Total final) */
|
||||
.analisis table tr.total-row {
|
||||
background: linear-gradient(135deg, #1e3a5f 0%, #2c5282 100%) !important;
|
||||
}
|
||||
|
||||
.analisis table tr.total-row td {
|
||||
color: #ffffff !important;
|
||||
font-weight: 700;
|
||||
font-size: 1.1rem;
|
||||
padding: 1.125rem 1rem !important;
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
.analisis table tr.total-row td.c6 {
|
||||
font-size: 1.25rem;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
/* Responsive para móviles */
|
||||
@media (max-width: 768px) {
|
||||
.analisis {
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.analisis table td {
|
||||
padding: 0.5rem !important;
|
||||
}
|
||||
|
||||
.analisis table tr.total-row td {
|
||||
font-size: 1rem !important;
|
||||
}
|
||||
|
||||
.analisis table tr.total-row td.c6 {
|
||||
font-size: 1.1rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* CATEGORÍAS */
|
||||
.category-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 0.375rem 0.875rem;
|
||||
background: #e9ecef;
|
||||
border-radius: 20px;
|
||||
color: #6c757d;
|
||||
text-decoration: none;
|
||||
font-size: 0.813rem;
|
||||
font-weight: 500;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.category-badge i {
|
||||
font-size: 0.7rem;
|
||||
color: #6c757d;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
/* Categorías en el Hero (fondo oscuro) */
|
||||
.category-badge-hero {
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
color: rgba(255, 255, 255, 0.95);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.category-badge-hero i {
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
/* MEJORAS COMPARTIR */
|
||||
.share-buttons .btn {
|
||||
transition: all 0.3s ease;
|
||||
border-width: 2px;
|
||||
}
|
||||
|
||||
.share-buttons .btn:hover {
|
||||
transform: translateY(-3px) scale(1.1);
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
|
||||
}
|
||||
|
||||
/* MEJORAS CTA */
|
||||
.cta-section {
|
||||
box-shadow: 0 8px 24px rgba(255, 133, 0, 0.3);
|
||||
}
|
||||
|
||||
/* FOOTER */
|
||||
.bg-dark {
|
||||
background-color: #1a1a1a !important;
|
||||
}
|
||||
|
||||
.footer a.text-white:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* ANIMACIONES SUAVES */
|
||||
* {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
NUEVAS FUNCIONALIDADES - Let's Talk + CTA Box + Modal
|
||||
======================================== */
|
||||
|
||||
/* 1. BOTÓN "LET'S TALK" EN NAVBAR */
|
||||
.btn-lets-talk {
|
||||
background: linear-gradient(135deg, #FF6B35 0%, #FF8C42 100%);
|
||||
color: #ffffff;
|
||||
font-weight: 600;
|
||||
padding: 0.5rem 1.5rem;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 4px 12px rgba(255, 107, 53, 0.3);
|
||||
}
|
||||
|
||||
.btn-lets-talk:hover {
|
||||
background: linear-gradient(135deg, #FF5722 0%, #FF6B35 100%);
|
||||
color: #ffffff;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 18px rgba(255, 107, 53, 0.45);
|
||||
}
|
||||
|
||||
.btn-lets-talk:active {
|
||||
transform: translateY(0);
|
||||
box-shadow: 0 2px 8px rgba(255, 107, 53, 0.3);
|
||||
}
|
||||
|
||||
.btn-lets-talk i {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
/* 2. TOC OPTIMIZADA CON MAX-HEIGHT Y SCROLL */
|
||||
.toc-list {
|
||||
max-height: 600px;
|
||||
overflow-y: auto;
|
||||
padding-right: 0.5rem;
|
||||
}
|
||||
|
||||
/* Estilo del scrollbar para TOC */
|
||||
.toc-list::-webkit-scrollbar {
|
||||
width: 5px;
|
||||
}
|
||||
|
||||
.toc-list::-webkit-scrollbar-track {
|
||||
background: #e9ecef;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.toc-list::-webkit-scrollbar-thumb {
|
||||
background: #0d6efd;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.toc-list::-webkit-scrollbar-thumb:hover {
|
||||
background: #0b5ed7;
|
||||
}
|
||||
|
||||
/* Reducir padding/margin en TOC para evitar scroll */
|
||||
.toc-container {
|
||||
padding: 0.75rem 1rem !important;
|
||||
}
|
||||
|
||||
.toc-container h4 {
|
||||
margin-bottom: 0.75rem !important;
|
||||
padding-bottom: 0.5rem !important;
|
||||
}
|
||||
|
||||
.toc-container li {
|
||||
margin-bottom: 0.1rem !important;
|
||||
}
|
||||
|
||||
.toc-container a {
|
||||
padding: 0.25rem 0.75rem !important;
|
||||
font-size: 0.875rem !important;
|
||||
line-height: 1.3 !important;
|
||||
}
|
||||
|
||||
/* 3. CTA BOX EN SIDEBAR - Sin icono, más compacto, NO sticky */
|
||||
.cta-box-sidebar {
|
||||
background: linear-gradient(135deg, #FF8600 0%, #FFB800 100%);
|
||||
border-radius: 10px;
|
||||
padding: 1.25rem;
|
||||
text-align: center;
|
||||
box-shadow: 0 6px 20px rgba(255, 133, 0, 0.3);
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.cta-box-sidebar::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -50%;
|
||||
right: -50%;
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
background: radial-gradient(circle, rgba(255, 255, 255, 0.08) 0%, transparent 70%);
|
||||
animation: pulse 4s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% {
|
||||
transform: scale(1);
|
||||
opacity: 0.4;
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.05);
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
|
||||
.cta-box-sidebar:hover {
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 10px 28px rgba(255, 133, 0, 0.4);
|
||||
}
|
||||
|
||||
.cta-box-title {
|
||||
color: #ffffff;
|
||||
font-weight: 700;
|
||||
font-size: 1rem;
|
||||
margin-bottom: 0.65rem;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.cta-box-text {
|
||||
color: rgba(255, 255, 255, 0.95);
|
||||
font-size: 0.85rem;
|
||||
margin-bottom: 1rem;
|
||||
line-height: 1.4;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.btn-cta-box {
|
||||
background: #ffffff;
|
||||
color: #FF8600;
|
||||
font-weight: 600;
|
||||
padding: 0.65rem 1.5rem;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.btn-cta-box:hover {
|
||||
background: #f8f9fa;
|
||||
color: #FF6B35;
|
||||
transform: scale(1.05);
|
||||
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.btn-cta-box:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
/* 4. MODAL DE CONTACTO */
|
||||
.modal-content {
|
||||
border-radius: 16px;
|
||||
border: none;
|
||||
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
padding: 1.5rem 1.5rem 1rem 1.5rem;
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
font-size: 1.5rem;
|
||||
color: #2c3e50;
|
||||
}
|
||||
|
||||
.btn-close {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.btn-close:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
padding: 1rem 1.5rem 1.5rem 1.5rem;
|
||||
}
|
||||
|
||||
.form-label {
|
||||
font-weight: 500;
|
||||
color: #495057;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.form-control {
|
||||
border-radius: 8px;
|
||||
border: 1px solid #dee2e6;
|
||||
padding: 0.65rem 1rem;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.form-control:focus {
|
||||
border-color: #FF8600;
|
||||
box-shadow: 0 0 0 0.2rem rgba(255, 133, 0, 0.15);
|
||||
}
|
||||
|
||||
.btn-submit-form {
|
||||
background: linear-gradient(135deg, #FF5722 0%, #FF6B35 100%);
|
||||
color: #ffffff;
|
||||
font-weight: 600;
|
||||
padding: 0.75rem 1.5rem;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 4px 12px rgba(255, 87, 34, 0.3);
|
||||
}
|
||||
|
||||
.btn-submit-form:hover {
|
||||
background: linear-gradient(135deg, #E64A19 0%, #FF5722 100%);
|
||||
color: #ffffff;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 18px rgba(255, 87, 34, 0.45);
|
||||
}
|
||||
|
||||
.btn-submit-form:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
/* Mensajes de éxito/error del formulario */
|
||||
.alert {
|
||||
border-radius: 8px;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.alert-success {
|
||||
background-color: #d4edda;
|
||||
border-color: #c3e6cb;
|
||||
color: #155724;
|
||||
}
|
||||
|
||||
.alert-danger {
|
||||
background-color: #f8d7da;
|
||||
border-color: #f5c6cb;
|
||||
color: #721c24;
|
||||
}
|
||||
|
||||
/* 5. FORMULARIO DE CONTACTO (Sección antes del footer) */
|
||||
.contact-info h6 {
|
||||
font-weight: 600;
|
||||
color: #2c3e50;
|
||||
}
|
||||
|
||||
.btn-contact-submit {
|
||||
background: linear-gradient(135deg, #FF8600 0%, #FFB800 100%);
|
||||
color: #ffffff;
|
||||
font-weight: 600;
|
||||
padding: 0.75rem 1.5rem;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 4px 12px rgba(255, 133, 0, 0.3);
|
||||
}
|
||||
|
||||
.btn-contact-submit:hover {
|
||||
background: linear-gradient(135deg, #FF6B35 0%, #FF8600 100%);
|
||||
color: #ffffff;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 18px rgba(255, 133, 0, 0.45);
|
||||
}
|
||||
|
||||
.btn-contact-submit:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
/* 6. RESPONSIVE ADJUSTMENTS */
|
||||
@media (max-width: 991.98px) {
|
||||
.btn-lets-talk {
|
||||
margin-top: 1rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.cta-box-sidebar {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.toc-list {
|
||||
max-height: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
.cta-box-title {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.cta-box-text {
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.toc-container h4 {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
}
|
||||
BIN
_planeacion/theme-template/images/featured-image.png
Normal file
BIN
_planeacion/theme-template/images/featured-image.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 256 KiB |
1333
_planeacion/theme-template/index.html
Normal file
1333
_planeacion/theme-template/index.html
Normal file
File diff suppressed because it is too large
Load Diff
365
_planeacion/theme-template/js/main.js
Normal file
365
_planeacion/theme-template/js/main.js
Normal file
@@ -0,0 +1,365 @@
|
||||
// Navbar scroll effect
|
||||
window.addEventListener('scroll', function() {
|
||||
const navbar = document.querySelector('.navbar');
|
||||
if (window.scrollY > 50) {
|
||||
navbar.classList.add('scrolled');
|
||||
} else {
|
||||
navbar.classList.remove('scrolled');
|
||||
}
|
||||
});
|
||||
|
||||
// Smooth scroll para TOC links
|
||||
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) {
|
||||
// Altura del navbar sticky + margen adicional
|
||||
const navbarHeight = document.querySelector('.navbar').offsetHeight;
|
||||
const offsetTop = targetElement.offsetTop - navbarHeight - 40;
|
||||
window.scrollTo({
|
||||
top: offsetTop,
|
||||
behavior: 'smooth'
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// ScrollSpy mejorado para TOC
|
||||
function updateActiveSection() {
|
||||
const tocLinks = document.querySelectorAll('.toc-container a');
|
||||
const navbar = document.querySelector('.navbar');
|
||||
const navbarHeight = navbar ? navbar.offsetHeight : 0;
|
||||
|
||||
// Obtener todas las secciones referenciadas en el TOC
|
||||
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);
|
||||
|
||||
// Calcular qué sección está visible
|
||||
// Una sección está "activa" cuando su parte superior está por encima del punto de activación
|
||||
const scrollPosition = window.scrollY + navbarHeight + 100; // Punto de activación
|
||||
|
||||
let activeSection = null;
|
||||
|
||||
// Recorrer las secciones de arriba hacia abajo
|
||||
for (let i = 0; i < sections.length; i++) {
|
||||
const section = sections[i];
|
||||
const sectionTop = section.offsetTop;
|
||||
|
||||
// Si hemos pasado esta sección, es la activa
|
||||
if (scrollPosition >= sectionTop) {
|
||||
activeSection = section.getAttribute('id');
|
||||
} else {
|
||||
// Ya no hay más secciones visibles
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
// Si no hay sección activa y estamos al inicio, activar la primera
|
||||
if (!activeSection && sections.length > 0 && window.scrollY < sections[0].offsetTop) {
|
||||
activeSection = sections[0].getAttribute('id');
|
||||
}
|
||||
|
||||
// Actualizar clases active en los links del TOC
|
||||
tocLinks.forEach(link => {
|
||||
link.classList.remove('active');
|
||||
const href = link.getAttribute('href');
|
||||
if (href === '#' + activeSection) {
|
||||
link.classList.add('active');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Ejecutar al hacer scroll
|
||||
window.addEventListener('scroll', updateActiveSection);
|
||||
|
||||
// Ejecutar al cargar la página
|
||||
document.addEventListener('DOMContentLoaded', updateActiveSection);
|
||||
|
||||
// A/B Test para CTA - Rotación en cada carga de página
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Selección aleatoria 50/50 entre A y B en cada carga
|
||||
const ctaVariant = Math.random() < 0.5 ? 'A' : 'B';
|
||||
|
||||
// Mostrar la variante seleccionada
|
||||
if (ctaVariant === 'A') {
|
||||
document.querySelector('.cta-variant-a').style.display = 'block';
|
||||
} else {
|
||||
document.querySelector('.cta-variant-b').style.display = 'block';
|
||||
}
|
||||
|
||||
// Tracking de clicks en el CTA (opcional, para Google Analytics)
|
||||
document.querySelectorAll('.cta-button').forEach(button => {
|
||||
button.addEventListener('click', function(e) {
|
||||
const variant = this.getAttribute('data-cta-variant');
|
||||
|
||||
// Si tienes Google Analytics instalado:
|
||||
if (typeof gtag !== 'undefined') {
|
||||
gtag('event', 'cta_click', {
|
||||
'event_category': 'CTA',
|
||||
'event_label': 'Variant_' + variant,
|
||||
'value': variant
|
||||
});
|
||||
}
|
||||
|
||||
// Log en consola para verificar
|
||||
console.log('CTA clicked - Variant: ' + variant);
|
||||
});
|
||||
});
|
||||
|
||||
// ==========================================
|
||||
// CARGAR MODAL DE CONTACTO DINÁMICAMENTE
|
||||
// ==========================================
|
||||
loadContactModal();
|
||||
|
||||
// ==========================================
|
||||
// INICIALIZAR FORMULARIO DE FOOTER
|
||||
// ==========================================
|
||||
initFooterContactForm();
|
||||
});
|
||||
|
||||
/**
|
||||
* Carga el modal de contacto desde un archivo externo
|
||||
*/
|
||||
function loadContactModal() {
|
||||
fetch('modal-contact.html')
|
||||
.then(response => {
|
||||
if (!response.ok) {
|
||||
throw new Error('No se pudo cargar el modal de contacto');
|
||||
}
|
||||
return response.text();
|
||||
})
|
||||
.then(html => {
|
||||
// Insertar el HTML del modal en el contenedor
|
||||
document.getElementById('modalContainer').innerHTML = html;
|
||||
|
||||
// Inicializar el formulario de contacto
|
||||
initContactForm();
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error cargando el modal:', error);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Inicializa el formulario de contacto con validación y envío a webhook
|
||||
*/
|
||||
function initContactForm() {
|
||||
const contactForm = document.getElementById('contactForm');
|
||||
|
||||
if (!contactForm) {
|
||||
console.error('Formulario de contacto no encontrado');
|
||||
return;
|
||||
}
|
||||
|
||||
contactForm.addEventListener('submit', async function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
// Obtener datos del formulario
|
||||
const formData = {
|
||||
fullName: document.getElementById('fullName').value.trim(),
|
||||
company: document.getElementById('company').value.trim(),
|
||||
whatsapp: document.getElementById('whatsapp').value.trim(),
|
||||
email: document.getElementById('email').value.trim(),
|
||||
comments: document.getElementById('comments').value.trim(),
|
||||
timestamp: new Date().toISOString(),
|
||||
source: 'APU Website - Let\'s Talk Button'
|
||||
};
|
||||
|
||||
// Validación básica
|
||||
if (!formData.fullName || !formData.whatsapp || !formData.email) {
|
||||
showFormMessage('Por favor completa todos los campos obligatorios', 'danger');
|
||||
return;
|
||||
}
|
||||
|
||||
// Validar email
|
||||
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
||||
if (!emailRegex.test(formData.email)) {
|
||||
showFormMessage('Por favor ingresa un correo electrónico válido', 'danger');
|
||||
return;
|
||||
}
|
||||
|
||||
// Validar WhatsApp (básico)
|
||||
const whatsappRegex = /^\+?[0-9]{10,15}$/;
|
||||
if (!whatsappRegex.test(formData.whatsapp.replace(/\s/g, ''))) {
|
||||
showFormMessage('Por favor ingresa un número de WhatsApp válido', 'danger');
|
||||
return;
|
||||
}
|
||||
|
||||
// Deshabilitar botón mientras se envía
|
||||
const submitButton = contactForm.querySelector('button[type="submit"]');
|
||||
const originalButtonText = submitButton.innerHTML;
|
||||
submitButton.disabled = true;
|
||||
submitButton.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>Enviando...';
|
||||
|
||||
try {
|
||||
// IMPORTANTE: Reemplaza esta URL con tu webhook real
|
||||
const WEBHOOK_URL = 'https://tu-webhook.com/contacto';
|
||||
|
||||
const response = await fetch(WEBHOOK_URL, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify(formData)
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
showFormMessage('¡Mensaje enviado exitosamente! Nos pondremos en contacto pronto.', 'success');
|
||||
contactForm.reset();
|
||||
|
||||
// Cerrar modal después de 2 segundos
|
||||
setTimeout(() => {
|
||||
const modalElement = document.getElementById('contactModal');
|
||||
const modal = bootstrap.Modal.getInstance(modalElement);
|
||||
if (modal) {
|
||||
modal.hide();
|
||||
}
|
||||
}, 2000);
|
||||
|
||||
// Tracking de conversión (si tienes Google Analytics)
|
||||
if (typeof gtag !== 'undefined') {
|
||||
gtag('event', 'form_submission', {
|
||||
'event_category': 'Contact Form',
|
||||
'event_label': 'Contact Form Submitted',
|
||||
'value': 1
|
||||
});
|
||||
}
|
||||
} else {
|
||||
throw new Error('Error al enviar el formulario');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error:', error);
|
||||
showFormMessage('Hubo un error al enviar el mensaje. Por favor intenta nuevamente.', 'danger');
|
||||
} finally {
|
||||
// Rehabilitar botón
|
||||
submitButton.disabled = false;
|
||||
submitButton.innerHTML = originalButtonText;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Muestra mensajes de éxito o error en el formulario
|
||||
*/
|
||||
function showFormMessage(message, type) {
|
||||
const messageDiv = document.getElementById('formMessage');
|
||||
messageDiv.className = `mt-3 alert alert-${type}`;
|
||||
messageDiv.textContent = message;
|
||||
messageDiv.style.display = 'block';
|
||||
|
||||
// Ocultar mensaje después de 5 segundos
|
||||
setTimeout(() => {
|
||||
messageDiv.style.display = 'none';
|
||||
}, 5000);
|
||||
}
|
||||
|
||||
/**
|
||||
* Inicializa el formulario de contacto del footer
|
||||
*/
|
||||
function initFooterContactForm() {
|
||||
const footerForm = document.getElementById('footerContactForm');
|
||||
|
||||
if (!footerForm) {
|
||||
console.error('Formulario de footer no encontrado');
|
||||
return;
|
||||
}
|
||||
|
||||
footerForm.addEventListener('submit', async function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
// Obtener datos del formulario
|
||||
const formData = {
|
||||
fullName: document.getElementById('footerFullName').value.trim(),
|
||||
company: document.getElementById('footerCompany').value.trim(),
|
||||
whatsapp: document.getElementById('footerWhatsapp').value.trim(),
|
||||
email: document.getElementById('footerEmail').value.trim(),
|
||||
comments: document.getElementById('footerComments').value.trim(),
|
||||
timestamp: new Date().toISOString(),
|
||||
source: 'APU Website - Footer Contact Form'
|
||||
};
|
||||
|
||||
// Validación básica
|
||||
if (!formData.fullName || !formData.whatsapp || !formData.email) {
|
||||
showFooterFormMessage('Por favor completa todos los campos obligatorios', 'danger');
|
||||
return;
|
||||
}
|
||||
|
||||
// Validar email
|
||||
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
||||
if (!emailRegex.test(formData.email)) {
|
||||
showFooterFormMessage('Por favor ingresa un correo electrónico válido', 'danger');
|
||||
return;
|
||||
}
|
||||
|
||||
// Validar WhatsApp (básico)
|
||||
const whatsappRegex = /^\+?[0-9]{10,15}$/;
|
||||
if (!whatsappRegex.test(formData.whatsapp.replace(/\s/g, ''))) {
|
||||
showFooterFormMessage('Por favor ingresa un número de WhatsApp válido', 'danger');
|
||||
return;
|
||||
}
|
||||
|
||||
// Deshabilitar botón mientras se envía
|
||||
const submitButton = footerForm.querySelector('button[type="submit"]');
|
||||
const originalButtonText = submitButton.innerHTML;
|
||||
submitButton.disabled = true;
|
||||
submitButton.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>Enviando...';
|
||||
|
||||
try {
|
||||
// IMPORTANTE: Reemplaza esta URL con tu webhook real
|
||||
const WEBHOOK_URL = 'https://tu-webhook.com/contacto';
|
||||
|
||||
const response = await fetch(WEBHOOK_URL, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify(formData)
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
showFooterFormMessage('¡Mensaje enviado exitosamente! Nos pondremos en contacto pronto.', 'success');
|
||||
footerForm.reset();
|
||||
|
||||
// Tracking de conversión (si tienes Google Analytics)
|
||||
if (typeof gtag !== 'undefined') {
|
||||
gtag('event', 'form_submission', {
|
||||
'event_category': 'Footer Contact Form',
|
||||
'event_label': 'Footer Form Submitted',
|
||||
'value': 1
|
||||
});
|
||||
}
|
||||
} else {
|
||||
throw new Error('Error al enviar el formulario');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error:', error);
|
||||
showFooterFormMessage('Hubo un error al enviar el mensaje. Por favor intenta nuevamente.', 'danger');
|
||||
} finally {
|
||||
// Rehabilitar botón
|
||||
submitButton.disabled = false;
|
||||
submitButton.innerHTML = originalButtonText;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Muestra mensajes de éxito o error en el formulario del footer
|
||||
*/
|
||||
function showFooterFormMessage(message, type) {
|
||||
const messageDiv = document.getElementById('footerFormMessage');
|
||||
messageDiv.className = `mt-2 alert alert-${type}`;
|
||||
messageDiv.textContent = message;
|
||||
messageDiv.style.display = 'block';
|
||||
|
||||
// Ocultar mensaje después de 5 segundos
|
||||
setTimeout(() => {
|
||||
messageDiv.style.display = 'none';
|
||||
}, 5000);
|
||||
}
|
||||
42
_planeacion/theme-template/modal-contact.html
Normal file
42
_planeacion/theme-template/modal-contact.html
Normal 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>
|
||||
Reference in New Issue
Block a user