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

backup: estado antes de limpieza de defaults

Browse Source
This commit is contained in:
FrankZamora
2025-11-13 21:45:11 -06:00
parent d73e0dc9cd
commit 0038ad502c
38 changed files with 9495 additions and 512 deletions
Download Patch File Download Diff File Expand all files Collapse all files

604
admin/components/component-hero-section.php Normal file
View File

@@ -0,0 +1,604 @@
<?php
/**
* Admin Panel - Hero Section Component
*
* Tab panel para configurar el Hero Section del tema
*
* @package Apus_Theme
* @since 2.0.0
*/
if (!defined('ABSPATH')) {
exit;
}
?>
<!-- ============================================================
TAB: HERO SECTION CONFIGURATION
============================================================ -->
<div class="tab-pane fade" id="heroSectionTab" role="tabpanel" aria-labelledby="heroSection-tab">
<!-- ========================================
PATRÓN 1: HEADER CON GRADIENTE
======================================== -->
<div class="rounded p-4 mb-4 shadow text-white" style="background: linear-gradient(135deg, #0E2337 0%, #1e3a5f 100%); border-left: 4px solid #FF8600;">
<div class="d-flex align-items-center justify-content-between flex-wrap gap-3">
<div>
<h3 class="h4 mb-1 fw-bold">
<i class="bi bi-image me-2" style="color: #FF8600;"></i>
Configuración del Hero Section
</h3>
<p class="mb-0 small" style="opacity: 0.85;">
Personaliza el banner principal con título y categorías
</p>
</div>
<button type="button" class="btn btn-sm btn-outline-light" id="resetHeroSectionDefaults">
<i class="bi bi-arrow-counterclockwise me-1"></i>
Restaurar valores por defecto
</button>
</div>
</div>
<!-- ========================================
PATRÓN 2: LAYOUT 2 COLUMNAS
======================================== -->
<div class="row g-3">
<!-- ========================================
COLUMNA IZQUIERDA
======================================== -->
<div class="col-lg-6">
<!-- ========================================
GRUPO 1: ACTIVACIÓN Y VISIBILIDAD (OBLIGATORIO)
======================================== -->
<div class="card shadow-sm mb-3" style="border-left: 4px solid #1e3a5f;">
<div class="card-body">
<h5 class="fw-bold mb-3" style="color: #1e3a5f;">
<i class="bi bi-toggle-on me-2" style="color: #FF8600;"></i>
Activación y Visibilidad
</h5>
<!-- Switch 1: Enabled (OBLIGATORIO) -->
<div class="mb-2">
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="heroSectionEnabled" checked>
<label class="form-check-label small" for="heroSectionEnabled" style="color: #495057;">
<i class="bi bi-power me-1" style="color: #FF8600;"></i>
<strong>Activar Hero Section</strong>
</label>
</div>
</div>
<!-- Switch 2: Show on Mobile (OBLIGATORIO) -->
<div class="mb-2">
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="heroSectionShowOnMobile" checked>
<label class="form-check-label small" for="heroSectionShowOnMobile" style="color: #495057;">
<i class="bi bi-phone me-1" style="color: #FF8600;"></i>
<strong>Mostrar en Mobile</strong> <span class="text-muted">(&lt;768px)</span>
</label>
</div>
</div>
<!-- Switch 3: Show on Desktop (OBLIGATORIO) -->
<div class="mb-0">
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="heroSectionShowOnDesktop" checked>
<label class="form-check-label small" for="heroSectionShowOnDesktop" style="color: #495057;">
<i class="bi bi-display me-1" style="color: #FF8600;"></i>
<strong>Mostrar en Desktop</strong> <span class="text-muted">(≥768px)</span>
</label>
</div>
</div>
</div>
</div>
<!-- ========================================
GRUPO 2: CONTENIDO Y ESTRUCTURA
======================================== -->
<div class="card shadow-sm mb-3" style="border-left: 4px solid #1e3a5f;">
<div class="card-body">
<h5 class="fw-bold mb-3" style="color: #1e3a5f;">
<i class="bi bi-card-text me-2" style="color: #FF8600;"></i>
Contenido y Estructura
</h5>
<!-- Switch: Show Category Badges -->
<div class="mb-2">
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="heroSectionShowCategoryBadges" checked>
<label class="form-check-label small" for="heroSectionShowCategoryBadges" style="color: #495057;">
<i class="bi bi-folder me-1" style="color: #FF8600;"></i>
<strong>Mostrar Category Badges</strong>
</label>
</div>
</div>
<!-- Text input: Badge Icon -->
<div class="mb-2">
<label for="heroSectionCategoryBadgeIcon" class="form-label small mb-1 fw-semibold" style="color: #495057;">
<i class="bi bi-stars me-1" style="color: #FF8600;"></i>
Icono de Category Badge
</label>
<input type="text" id="heroSectionCategoryBadgeIcon" class="form-control form-control-sm" value="bi bi-folder-fill" placeholder="bi bi-...">
<small class="text-muted">Clase de Bootstrap Icons</small>
</div>
<!-- Textarea: Excluded Categories -->
<div class="mb-2">
<label for="heroSectionExcludedCategories" class="form-label small mb-1 fw-semibold" style="color: #495057;">
<i class="bi bi-x-circle me-1" style="color: #FF8600;"></i>
Categorías Excluidas
</label>
<textarea id="heroSectionExcludedCategories" class="form-control form-control-sm" rows="2" placeholder="Una por línea">Uncategorized
Sin categoría</textarea>
<small class="text-muted">Una categoría por línea</small>
</div>
<!-- Compacted row: Alignment + Display Class -->
<div class="row g-2 mb-0">
<div class="col-6">
<label for="heroSectionTitleAlignment" class="form-label small mb-1 fw-semibold" style="color: #495057;">
<i class="bi bi-text-center me-1" style="color: #FF8600;"></i>
Alineación Título
</label>
<select id="heroSectionTitleAlignment" class="form-select form-select-sm">
<option value="left">Izquierda</option>
<option value="center" selected>Centro</option>
<option value="right">Derecha</option>
</select>
</div>
<div class="col-6">
<label for="heroSectionTitleDisplayClass" class="form-label small mb-1 fw-semibold" style="color: #495057;">
<i class="bi bi-type-h1 me-1" style="color: #FF8600;"></i>
Clase Display
</label>
<select id="heroSectionTitleDisplayClass" class="form-select form-select-sm">
<option value="display-1">display-1</option>
<option value="display-2">display-2</option>
<option value="display-3">display-3</option>
<option value="display-4">display-4</option>
<option value="display-5" selected>display-5</option>
<option value="display-6">display-6</option>
</select>
</div>
</div>
</div>
</div>
<!-- ========================================
GRUPO 3: COLORES DEL HERO
======================================== -->
<div class="card shadow-sm mb-3" style="border-left: 4px solid #1e3a5f;">
<div class="card-body">
<h5 class="fw-bold mb-3" style="color: #1e3a5f;">
<i class="bi bi-palette me-2" style="color: #FF8600;"></i>
Colores del Hero
</h5>
<!-- Switch: Use Gradient Background -->
<div class="mb-2">
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="heroSectionUseGradientBackground" checked>
<label class="form-check-label small" for="heroSectionUseGradientBackground" style="color: #495057;">
<i class="bi bi-palette-fill me-1" style="color: #FF8600;"></i>
<strong>Usar Gradiente de Fondo</strong>
</label>
</div>
</div>
<!-- Color pickers: Grid 2x2 (primera fila) -->
<div class="row g-2 mb-2">
<div class="col-6">
<label for="heroSectionGradientStartColor" class="form-label small mb-1 fw-semibold" style="color: #495057;">
<i class="bi bi-paint-bucket me-1" style="color: #FF8600;"></i>
Color Gradiente Inicio
</label>
<input type="color" id="heroSectionGradientStartColor" class="form-control form-control-color w-100" value="#1e3a5f" title="Seleccionar color gradiente inicio">
<small class="text-muted d-block mt-1" id="heroSectionGradientStartColorValue">#1E3A5F</small>
</div>
<div class="col-6">
<label for="heroSectionGradientEndColor" class="form-label small mb-1 fw-semibold" style="color: #495057;">
<i class="bi bi-paint-bucket-fill me-1" style="color: #FF8600;"></i>
Color Gradiente Fin
</label>
<input type="color" id="heroSectionGradientEndColor" class="form-control form-control-color w-100" value="#2c5282" title="Seleccionar color gradiente fin">
<small class="text-muted d-block mt-1" id="heroSectionGradientEndColorValue">#2C5282</small>
</div>
</div>
<!-- Color pickers: Grid 2x2 (segunda fila) -->
<div class="row g-2 mb-2">
<div class="col-6">
<label for="heroSectionHeroTextColor" class="form-label small mb-1 fw-semibold" style="color: #495057;">
<i class="bi bi-fonts me-1" style="color: #FF8600;"></i>
Color Texto H1
</label>
<input type="color" id="heroSectionHeroTextColor" class="form-control form-control-color w-100" value="#ffffff" title="Seleccionar color texto">
<small class="text-muted d-block mt-1" id="heroSectionHeroTextColorValue">#ffffff</small>
</div>
<div class="col-6">
<label for="heroSectionSolidBackgroundColor" class="form-label small mb-1 fw-semibold" style="color: #495057;">
<i class="bi bi-square-fill me-1" style="color: #FF8600;"></i>
Color Fondo Sólido
</label>
<input type="color" id="heroSectionSolidBackgroundColor" class="form-control form-control-color w-100" value="#1e3a5f" title="Seleccionar color fondo sólido">
<small class="text-muted d-block mt-1" id="heroSectionSolidBackgroundColorValue">#1E3A5F</small>
</div>
</div>
<!-- Range: Gradient Angle -->
<div class="mb-0">
<label for="heroSectionGradientAngle" class="form-label small mb-1 fw-semibold d-flex justify-content-between align-items-center" style="color: #495057;">
<span>
<i class="bi bi-arrow-clockwise me-1" style="color: #FF8600;"></i>
Ángulo del Gradiente
</span>
<span class="badge bg-secondary" id="heroSectionGradientAngleValue">135°</span>
</label>
<input type="range" id="heroSectionGradientAngle" class="form-range" min="0" max="360" step="1" value="135">
</div>
</div>
</div>
<!-- ========================================
GRUPO 4: COLORES DE CATEGORY BADGES
======================================== -->
<div class="card shadow-sm mb-3" style="border-left: 4px solid #1e3a5f;">
<div class="card-body">
<h5 class="fw-bold mb-3" style="color: #1e3a5f;">
<i class="bi bi-folder-fill me-2" style="color: #FF8600;"></i>
Colores de Category Badges
</h5>
<!-- Color pickers: Grid 2x2 (primera fila) -->
<div class="row g-2 mb-2">
<div class="col-6">
<label for="heroSectionBadgeBgColor" class="form-label small mb-1 fw-semibold" style="color: #495057;">
<i class="bi bi-paint-bucket me-1" style="color: #FF8600;"></i>
Background Badge
</label>
<input type="text" id="heroSectionBadgeBgColor" class="form-control form-control-sm" value="rgba(255, 255, 255, 0.15)" placeholder="rgba(...)">
<small class="text-muted">Soporta RGBA</small>
</div>
<div class="col-6">
<label for="heroSectionBadgeBgHoverColor" class="form-label small mb-1 fw-semibold" style="color: #495057;">
<i class="bi bi-hand-index me-1" style="color: #FF8600;"></i>
Background Hover
</label>
<input type="text" id="heroSectionBadgeBgHoverColor" class="form-control form-control-sm" value="rgba(255, 133, 0, 0.2)" placeholder="rgba(...)">
<small class="text-muted">Soporta RGBA</small>
</div>
</div>
<!-- Color pickers: Grid 2x2 (segunda fila) -->
<div class="row g-2 mb-2">
<div class="col-6">
<label for="heroSectionBadgeBorderColor" class="form-label small mb-1 fw-semibold" style="color: #495057;">
<i class="bi bi-border me-1" style="color: #FF8600;"></i>
Border Badge
</label>
<input type="text" id="heroSectionBadgeBorderColor" class="form-control form-control-sm" value="rgba(255, 255, 255, 0.2)" placeholder="rgba(...)">
<small class="text-muted">Soporta RGBA</small>
</div>
<div class="col-6">
<label for="heroSectionBadgeTextColor" class="form-label small mb-1 fw-semibold" style="color: #495057;">
<i class="bi bi-fonts me-1" style="color: #FF8600;"></i>
Texto Badge
</label>
<input type="text" id="heroSectionBadgeTextColor" class="form-control form-control-sm" value="rgba(255, 255, 255, 0.95)" placeholder="rgba(...)">
<small class="text-muted">Soporta RGBA</small>
</div>
</div>
<!-- Color picker: Icon Color (full width) -->
<div class="mb-0">
<label for="heroSectionBadgeIconColor" class="form-label small mb-1 fw-semibold" style="color: #495057;">
<i class="bi bi-stars me-1" style="color: #FF8600;"></i>
Color Icono Badge
</label>
<input type="color" id="heroSectionBadgeIconColor" class="form-control form-control-color w-100" value="#FFB800" title="Seleccionar color icono">
<small class="text-muted d-block mt-1" id="heroSectionBadgeIconColorValue">#FFB800</small>
</div>
</div>
</div>
</div>
<!-- ========================================
COLUMNA DERECHA
======================================== -->
<div class="col-lg-6">
<!-- ========================================
GRUPO 5: ESPACIADO Y DIMENSIONES
======================================== -->
<div class="card shadow-sm mb-3" style="border-left: 4px solid #1e3a5f;">
<div class="card-body">
<h5 class="fw-bold mb-3" style="color: #1e3a5f;">
<i class="bi bi-arrows-fullscreen me-2" style="color: #FF8600;"></i>
Espaciado y Dimensiones
</h5>
<!-- Hero padding compactado -->
<div class="row g-2 mb-2">
<div class="col-6">
<label for="heroSectionHeroPaddingVertical" class="form-label small mb-1 fw-semibold" style="color: #495057;">
<i class="bi bi-arrows-vertical me-1" style="color: #FF8600;"></i>
Padding Vertical (rem)
</label>
<input type="number" id="heroSectionHeroPaddingVertical" class="form-control form-control-sm" value="3" min="0" max="10" step="0.5">
</div>
<div class="col-6">
<label for="heroSectionHeroPaddingHorizontal" class="form-label small mb-1 fw-semibold" style="color: #495057;">
<i class="bi bi-arrows-expand me-1" style="color: #FF8600;"></i>
Padding Horizontal (rem)
</label>
<input type="number" id="heroSectionHeroPaddingHorizontal" class="form-control form-control-sm" value="0" min="0" max="10" step="0.5">
</div>
</div>
<!-- Margin + Gap compactado -->
<div class="row g-2 mb-2">
<div class="col-6">
<label for="heroSectionHeroMarginBottom" class="form-label small mb-1 fw-semibold" style="color: #495057;">
<i class="bi bi-arrow-down me-1" style="color: #FF8600;"></i>
Margin Bottom (rem)
</label>
<input type="number" id="heroSectionHeroMarginBottom" class="form-control form-control-sm" value="1.5" min="0" max="5" step="0.5">
</div>
<div class="col-6">
<label for="heroSectionBadgesGap" class="form-label small mb-1 fw-semibold" style="color: #495057;">
<i class="bi bi-distribute-horizontal me-1" style="color: #FF8600;"></i>
Gap Badges (rem)
</label>
<input type="number" id="heroSectionBadgesGap" class="form-control form-control-sm" value="0.5" min="0" max="3" step="0.1">
</div>
</div>
<!-- Badge padding compactado -->
<div class="row g-2 mb-2">
<div class="col-6">
<label for="heroSectionBadgePaddingVertical" class="form-label small mb-1 fw-semibold" style="color: #495057;">
<i class="bi bi-arrows-vertical me-1" style="color: #FF8600;"></i>
Badge Padding V (rem)
</label>
<input type="number" id="heroSectionBadgePaddingVertical" class="form-control form-control-sm" value="0.375" min="0" max="2" step="0.125">
</div>
<div class="col-6">
<label for="heroSectionBadgePaddingHorizontal" class="form-label small mb-1 fw-semibold" style="color: #495057;">
<i class="bi bi-arrows-expand me-1" style="color: #FF8600;"></i>
Badge Padding H (rem)
</label>
<input type="number" id="heroSectionBadgePaddingHorizontal" class="form-control form-control-sm" value="0.875" min="0" max="2" step="0.125">
</div>
</div>
<!-- Border radius -->
<div class="mb-0">
<label for="heroSectionBadgeBorderRadius" class="form-label small mb-1 fw-semibold" style="color: #495057;">
<i class="bi bi-diamond me-1" style="color: #FF8600;"></i>
Border Radius Badge (px)
</label>
<input type="number" id="heroSectionBadgeBorderRadius" class="form-control form-control-sm" value="20" min="0" max="50" step="1">
</div>
</div>
</div>
<!-- ========================================
GRUPO 6: TIPOGRAFÍA
======================================== -->
<div class="card shadow-sm mb-3" style="border-left: 4px solid #1e3a5f;">
<div class="card-body">
<h5 class="fw-bold mb-3" style="color: #1e3a5f;">
<i class="bi bi-type me-2" style="color: #FF8600;"></i>
Tipografía
</h5>
<!-- H1 Font Weight + Badge Font Size compactado -->
<div class="row g-2 mb-2">
<div class="col-6">
<label for="heroSectionH1FontWeight" class="form-label small mb-1 fw-semibold" style="color: #495057;">
<i class="bi bi-type-bold me-1" style="color: #FF8600;"></i>
Font Weight H1
</label>
<select id="heroSectionH1FontWeight" class="form-select form-select-sm">
<option value="400">400 (Normal)</option>
<option value="500">500 (Medium)</option>
<option value="600">600 (Semibold)</option>
<option value="700" selected>700 (Bold)</option>
</select>
</div>
<div class="col-6">
<label for="heroSectionBadgeFontSize" class="form-label small mb-1 fw-semibold" style="color: #495057;">
<i class="bi bi-fonts me-1" style="color: #FF8600;"></i>
Badge Font Size (rem)
</label>
<input type="number" id="heroSectionBadgeFontSize" class="form-control form-control-sm" value="0.813" min="0.5" max="2" step="0.125">
</div>
</div>
<!-- Badge Font Weight + H1 Line Height compactado -->
<div class="row g-2 mb-0">
<div class="col-6">
<label for="heroSectionBadgeFontWeight" class="form-label small mb-1 fw-semibold" style="color: #495057;">
<i class="bi bi-type-bold me-1" style="color: #FF8600;"></i>
Font Weight Badge
</label>
<select id="heroSectionBadgeFontWeight" class="form-select form-select-sm">
<option value="400">400 (Normal)</option>
<option value="500" selected>500 (Medium)</option>
<option value="600">600 (Semibold)</option>
<option value="700">700 (Bold)</option>
</select>
</div>
<div class="col-6">
<label for="heroSectionH1LineHeight" class="form-label small mb-1 fw-semibold" style="color: #495057;">
<i class="bi bi-text-paragraph me-1" style="color: #FF8600;"></i>
Line Height H1
</label>
<input type="number" id="heroSectionH1LineHeight" class="form-control form-control-sm" value="1.4" min="1" max="3" step="0.1">
</div>
</div>
</div>
</div>
<!-- ========================================
GRUPO 7: EFECTOS VISUALES
======================================== -->
<div class="card shadow-sm mb-3" style="border-left: 4px solid #1e3a5f;">
<div class="card-body">
<h5 class="fw-bold mb-3" style="color: #1e3a5f;">
<i class="bi bi-stars me-2" style="color: #FF8600;"></i>
Efectos Visuales
</h5>
<!-- Switch: Enable H1 Text Shadow -->
<div class="mb-2">
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="heroSectionEnableH1TextShadow" checked>
<label class="form-check-label small" for="heroSectionEnableH1TextShadow" style="color: #495057;">
<i class="bi bi-sun me-1" style="color: #FF8600;"></i>
<strong>Habilitar Text Shadow H1</strong>
</label>
</div>
</div>
<!-- Text input: H1 Text Shadow -->
<div class="mb-2">
<label for="heroSectionH1TextShadow" class="form-label small mb-1 fw-semibold" style="color: #495057;">
<i class="bi bi-droplet me-1" style="color: #FF8600;"></i>
Text Shadow H1
</label>
<input type="text" id="heroSectionH1TextShadow" class="form-control form-control-sm" value="1px 1px 2px rgba(0, 0, 0, 0.2)" placeholder="CSS shadow">
<small class="text-muted">Sintaxis CSS: x y blur color</small>
</div>
<!-- Switch: Enable Hero Box Shadow -->
<div class="mb-2">
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="heroSectionEnableHeroBoxShadow" checked>
<label class="form-check-label small" for="heroSectionEnableHeroBoxShadow" style="color: #495057;">
<i class="bi bi-box me-1" style="color: #FF8600;"></i>
<strong>Habilitar Box Shadow Hero</strong>
</label>
</div>
</div>
<!-- Text input: Hero Box Shadow -->
<div class="mb-2">
<label for="heroSectionHeroBoxShadow" class="form-label small mb-1 fw-semibold" style="color: #495057;">
<i class="bi bi-box-seam me-1" style="color: #FF8600;"></i>
Box Shadow Hero
</label>
<input type="text" id="heroSectionHeroBoxShadow" class="form-control form-control-sm" value="0 4px 16px rgba(30, 58, 95, 0.25)" placeholder="CSS shadow">
<small class="text-muted">Sintaxis CSS: x y blur spread color</small>
</div>
<!-- Switch: Enable Badge Backdrop Filter -->
<div class="mb-2">
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="heroSectionEnableBadgeBackdropFilter" checked>
<label class="form-check-label small" for="heroSectionEnableBadgeBackdropFilter" style="color: #495057;">
<i class="bi bi-bounding-box me-1" style="color: #FF8600;"></i>
<strong>Habilitar Backdrop Filter Badge</strong>
</label>
</div>
</div>
<!-- Text input: Badge Backdrop Filter -->
<div class="mb-0">
<label for="heroSectionBadgeBackdropFilter" class="form-label small mb-1 fw-semibold" style="color: #495057;">
<i class="bi bi-filter me-1" style="color: #FF8600;"></i>
Backdrop Filter Badge
</label>
<input type="text" id="heroSectionBadgeBackdropFilter" class="form-control form-control-sm" value="blur(10px)" placeholder="CSS filter">
<small class="text-muted">Ej: blur(10px), brightness(1.2)</small>
</div>
</div>
</div>
<!-- ========================================
GRUPO 8: TRANSICIONES Y ANIMACIONES
======================================== -->
<div class="card shadow-sm mb-3" style="border-left: 4px solid #1e3a5f;">
<div class="card-body">
<h5 class="fw-bold mb-3" style="color: #1e3a5f;">
<i class="bi bi-lightning me-2" style="color: #FF8600;"></i>
Transiciones y Animaciones
</h5>
<!-- Compacted row: Transition Speed + Hover Effect -->
<div class="row g-2 mb-0">
<div class="col-6">
<label for="heroSectionBadgeTransitionSpeed" class="form-label small mb-1 fw-semibold" style="color: #495057;">
<i class="bi bi-speedometer me-1" style="color: #FF8600;"></i>
Velocidad Transición
</label>
<select id="heroSectionBadgeTransitionSpeed" class="form-select form-select-sm">
<option value="fast">Rápida (0.15s)</option>
<option value="normal" selected>Normal (0.3s)</option>
<option value="slow">Lenta (0.5s)</option>
</select>
</div>
<div class="col-6">
<label for="heroSectionBadgeHoverEffect" class="form-label small mb-1 fw-semibold" style="color: #495057;">
<i class="bi bi-hand-index me-1" style="color: #FF8600;"></i>
Efecto Hover
</label>
<select id="heroSectionBadgeHoverEffect" class="form-select form-select-sm">
<option value="none">Ninguno</option>
<option value="background" selected>Background</option>
<option value="scale">Escala</option>
<option value="brightness">Brillo</option>
</select>
</div>
</div>
</div>
</div>
<!-- ========================================
GRUPO 9: AVANZADO
======================================== -->
<div class="card shadow-sm mb-3" style="border-left: 4px solid #1e3a5f;">
<div class="card-body">
<h5 class="fw-bold mb-3" style="color: #1e3a5f;">
<i class="bi bi-code-slash me-2" style="color: #FF8600;"></i>
Avanzado
</h5>
<!-- Text input: Custom Hero Classes -->
<div class="mb-2">
<label for="heroSectionCustomHeroClasses" class="form-label small mb-1 fw-semibold" style="color: #495057;">
<i class="bi bi-braces me-1" style="color: #FF8600;"></i>
Custom CSS Classes Hero
</label>
<input type="text" id="heroSectionCustomHeroClasses" class="form-control form-control-sm" value="" placeholder="custom-class-1 custom-class-2">
<small class="text-muted">Clases CSS adicionales separadas por espacio</small>
</div>
<!-- Text input: Custom Badge Classes -->
<div class="mb-0">
<label for="heroSectionCustomBadgeClasses" class="form-label small mb-1 fw-semibold" style="color: #495057;">
<i class="bi bi-braces-asterisk me-1" style="color: #FF8600;"></i>
Custom CSS Classes Badge
</label>
<input type="text" id="heroSectionCustomBadgeClasses" class="form-control form-control-sm" value="" placeholder="badge-custom-1">
<small class="text-muted">Clases CSS adicionales para badges</small>
</div>
</div>
</div>
</div>
</div>
</div>

393
admin/components/component-lets-talk-button.php Normal file
View File

@@ -0,0 +1,393 @@
<?php
/**
* Component: Let's Talk Button Configuration
*
* @package Apus_Theme
* @since 2.0.0
*/
if (!defined('ABSPATH')) {
exit;
}
?>
<!-- ============================================================
TAB: BOTÓN LET'S TALK CONFIGURATION
============================================================ -->
<div class="tab-pane fade" id="letsTalkButtonTab" role="tabpanel" aria-labelledby="lets-talk-button-config-tab">
<!-- ========================================
PATRÓN 1: HEADER CON GRADIENTE
======================================== -->
<div class="rounded p-4 mb-4 shadow text-white" style="background: linear-gradient(135deg, #0E2337 0%, #1e3a5f 100%); border-left: 4px solid #FF8600;">
<div class="d-flex align-items-center justify-content-between flex-wrap gap-3">
<div>
<h3 class="h4 mb-1 fw-bold">
<i class="bi bi-lightning-charge-fill me-2" style="color: #FF8600;"></i>
Configuración del Botón Let's Talk
</h3>
<p class="mb-0 small" style="opacity: 0.85;">
Personaliza el botón de contacto "Let's Talk" del navbar
</p>
</div>
<button type="button" class="btn btn-sm btn-outline-light" id="resetLetsTalkButtonDefaults">
<i class="bi bi-arrow-counterclockwise me-1"></i>
Restaurar valores por defecto
</button>
</div>
</div>
<!-- ========================================
PATRÓN 2: LAYOUT 2 COLUMNAS
======================================== -->
<div class="row g-3">
<div class="col-lg-6">
<!-- ========================================
GRUPO 1: ACTIVACIÓN Y VISIBILIDAD (3 campos)
PATRÓN 3: CARD CON BORDER-LEFT NAVY
PATRÓN 4: 3 SWITCHES OBLIGATORIOS
======================================== -->
<div class="card shadow-sm mb-3" style="border-left: 4px solid #1e3a5f;">
<div class="card-body">
<h5 class="fw-bold mb-3" style="color: #1e3a5f;">
<i class="bi bi-toggle-on me-2" style="color: #FF8600;"></i>
Activación y Visibilidad
</h5>
<!-- Switch 1: Enabled (OBLIGATORIO) -->
<div class="mb-2">
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="letsTalkButtonEnabled" checked>
<label class="form-check-label small" for="letsTalkButtonEnabled" style="color: #495057;">
<i class="bi bi-power me-1" style="color: #FF8600;"></i>
<strong>Activar Botón Let's Talk</strong>
</label>
</div>
</div>
<!-- Switch 2: Show on Mobile (OBLIGATORIO) -->
<div class="mb-2">
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="letsTalkButtonShowOnMobile" checked>
<label class="form-check-label small" for="letsTalkButtonShowOnMobile" style="color: #495057;">
<i class="bi bi-phone me-1" style="color: #FF8600;"></i>
<strong>Mostrar en Mobile</strong> <span class="text-muted">(&lt;768px)</span>
</label>
</div>
</div>
<!-- Switch 3: Show on Desktop (OBLIGATORIO) -->
<div class="mb-0">
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="letsTalkButtonShowOnDesktop" checked>
<label class="form-check-label small" for="letsTalkButtonShowOnDesktop" style="color: #495057;">
<i class="bi bi-display me-1" style="color: #FF8600;"></i>
<strong>Mostrar en Desktop</strong> <span class="text-muted">(≥768px)</span>
</label>
</div>
</div>
</div>
</div>
<!-- ========================================
GRUPO 2: CONTENIDO (3 campos)
PATRÓN 3: CARD CON BORDER-LEFT NAVY
======================================== -->
<div class="card shadow-sm mb-3" style="border-left: 4px solid #1e3a5f;">
<div class="card-body">
<h5 class="fw-bold mb-3" style="color: #1e3a5f;">
<i class="bi bi-chat-text me-2" style="color: #FF8600;"></i>
Contenido
</h5>
<!-- Switch: show_icon -->
<div class="mb-2">
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="letsTalkButtonShowIcon" checked>
<label class="form-check-label small" for="letsTalkButtonShowIcon" style="color: #495057;">
<i class="bi bi-eye me-1" style="color: #FF8600;"></i>
<strong>Mostrar icono</strong>
</label>
</div>
</div>
<!-- Text inputs compactados: text + icon_class -->
<div class="row g-2 mb-0">
<div class="col-6">
<label for="letsTalkButtonText" class="form-label small mb-1 fw-semibold" style="color: #495057;">
<i class="bi bi-fonts me-1" style="color: #FF8600;"></i>
Texto del botón
</label>
<input type="text" id="letsTalkButtonText" class="form-control form-control-sm" value="Let's Talk" maxlength="30">
<small class="text-muted">Máximo 30 caracteres</small>
</div>
<div class="col-6">
<label for="letsTalkButtonIconClass" class="form-label small mb-1 fw-semibold" style="color: #495057;">
<i class="bi bi-star me-1" style="color: #FF8600;"></i>
Clase del icono
</label>
<input type="text" id="letsTalkButtonIconClass" class="form-control form-control-sm" value="bi bi-lightning-charge-fill" placeholder="bi bi-...">
<small class="text-muted">Bootstrap Icons</small>
</div>
</div>
</div>
</div>
<!-- ========================================
GRUPO 3: TIPOGRAFÍA (1 campo)
PATRÓN 3: CARD CON BORDER-LEFT NAVY
======================================== -->
<div class="card shadow-sm mb-3" style="border-left: 4px solid #1e3a5f;">
<div class="card-body">
<h5 class="fw-bold mb-3" style="color: #1e3a5f;">
<i class="bi bi-fonts me-2" style="color: #FF8600;"></i>
Tipografía
</h5>
<!-- Select: font_weight -->
<div class="mb-0">
<label for="letsTalkButtonFontWeight" class="form-label small mb-1 fw-semibold" style="color: #495057;">
<i class="bi bi-type-bold me-1" style="color: #FF8600;"></i>
Peso de fuente
</label>
<select id="letsTalkButtonFontWeight" class="form-select form-select-sm">
<option value="400">Normal (400)</option>
<option value="500">Medium (500)</option>
<option value="600" selected>Semibold (600)</option>
<option value="700">Bold (700)</option>
</select>
</div>
</div>
</div>
<!-- ========================================
GRUPO 4: COMPORTAMIENTO (1 campo)
PATRÓN 3: CARD CON BORDER-LEFT NAVY
======================================== -->
<div class="card shadow-sm mb-3" style="border-left: 4px solid #1e3a5f;">
<div class="card-body">
<h5 class="fw-bold mb-3" style="color: #1e3a5f;">
<i class="bi bi-gear me-2" style="color: #FF8600;"></i>
Comportamiento
</h5>
<!-- Text input: modal_target -->
<div class="mb-0">
<label for="letsTalkButtonModalTarget" class="form-label small mb-1 fw-semibold" style="color: #495057;">
<i class="bi bi-window me-1" style="color: #FF8600;"></i>
ID del modal
</label>
<input type="text" id="letsTalkButtonModalTarget" class="form-control form-control-sm" value="#contactModal" maxlength="50" placeholder="#nombreModal">
<small class="text-muted">Debe comenzar con #</small>
</div>
</div>
</div>
<!-- ========================================
GRUPO 5: ESPACIADO Y POSICIÓN (3 campos)
PATRÓN 3: CARD CON BORDER-LEFT NAVY
======================================== -->
<div class="card shadow-sm mb-3" style="border-left: 4px solid #1e3a5f;">
<div class="card-body">
<h5 class="fw-bold mb-3" style="color: #1e3a5f;">
<i class="bi bi-arrows-angle-expand me-2" style="color: #FF8600;"></i>
Espaciado y Posición
</h5>
<!-- Number inputs compactados: padding_vertical + padding_horizontal -->
<div class="row g-2 mb-2">
<div class="col-6">
<label for="letsTalkButtonPaddingVertical" class="form-label small mb-1 fw-semibold" style="color: #495057;">
<i class="bi bi-arrows-vertical me-1" style="color: #FF8600;"></i>
Padding vertical
</label>
<input type="number" id="letsTalkButtonPaddingVertical" class="form-control form-control-sm" value="0.5" min="0" max="3" step="0.1">
<small class="text-muted">En rem (0-3)</small>
</div>
<div class="col-6">
<label for="letsTalkButtonPaddingHorizontal" class="form-label small mb-1 fw-semibold" style="color: #495057;">
<i class="bi bi-arrows-horizontal me-1" style="color: #FF8600;"></i>
Padding horizontal
</label>
<input type="number" id="letsTalkButtonPaddingHorizontal" class="form-control form-control-sm" value="1.5" min="0" max="5" step="0.1">
<small class="text-muted">En rem (0-5)</small>
</div>
</div>
<!-- Select: position -->
<div class="mb-0">
<label for="letsTalkButtonPosition" class="form-label small mb-1 fw-semibold" style="color: #495057;">
<i class="bi bi-pin-angle me-1" style="color: #FF8600;"></i>
Posición en navbar
</label>
<select id="letsTalkButtonPosition" class="form-select form-select-sm">
<option value="left">Izquierda</option>
<option value="center">Centro</option>
<option value="right" selected>Derecha</option>
</select>
</div>
</div>
</div>
</div>
<div class="col-lg-6">
<!-- ========================================
GRUPO 6: COLORES PERSONALIZADOS (4 campos)
PATRÓN 3: CARD CON BORDER-LEFT NAVY
PATRÓN 5: COLOR PICKERS EN GRID 2X2
======================================== -->
<div class="card shadow-sm mb-3" style="border-left: 4px solid #1e3a5f;">
<div class="card-body">
<h5 class="fw-bold mb-3" style="color: #1e3a5f;">
<i class="bi bi-palette me-2" style="color: #FF8600;"></i>
Colores Personalizados
</h5>
<!-- Color pickers en grid 2x2 -->
<div class="row g-2 mb-2">
<div class="col-6">
<label for="letsTalkButtonBgColor" class="form-label small mb-1 fw-semibold" style="color: #495057;">
<i class="bi bi-paint-bucket me-1" style="color: #FF8600;"></i>
Color de fondo
</label>
<input type="color" id="letsTalkButtonBgColor" class="form-control form-control-color w-100" value="#FF8600" title="Seleccionar color de fondo">
<small class="text-muted d-block mt-1" id="letsTalkButtonBgColorValue">#FF8600</small>
</div>
<div class="col-6">
<label for="letsTalkButtonBgHoverColor" class="form-label small mb-1 fw-semibold" style="color: #495057;">
<i class="bi bi-cursor me-1" style="color: #FF8600;"></i>
Color hover
</label>
<input type="color" id="letsTalkButtonBgHoverColor" class="form-control form-control-color w-100" value="#FF6B35" title="Seleccionar color hover">
<small class="text-muted d-block mt-1" id="letsTalkButtonBgHoverColorValue">#FF6B35</small>
</div>
</div>
<div class="row g-2 mb-0">
<div class="col-6">
<label for="letsTalkButtonTextColor" class="form-label small mb-1 fw-semibold" style="color: #495057;">
<i class="bi bi-type me-1" style="color: #FF8600;"></i>
Color de texto
</label>
<input type="color" id="letsTalkButtonTextColor" class="form-control form-control-color w-100" value="#ffffff" title="Seleccionar color de texto">
<small class="text-muted d-block mt-1" id="letsTalkButtonTextColorValue">#ffffff</small>
</div>
<div class="col-6">
<label for="letsTalkButtonIconColor" class="form-label small mb-1 fw-semibold" style="color: #495057;">
<i class="bi bi-star-fill me-1" style="color: #FF8600;"></i>
Color icono
</label>
<input type="color" id="letsTalkButtonIconColor" class="form-control form-control-color w-100" value="#ffffff" title="Seleccionar color icono">
<small class="text-muted d-block mt-1" id="letsTalkButtonIconColorValue">#ffffff</small>
</div>
</div>
</div>
</div>
<!-- ========================================
GRUPO 7: ESTILOS AVANZADOS (8 campos)
PATRÓN 3: CARD CON BORDER-LEFT NAVY
======================================== -->
<div class="card shadow-sm mb-3" style="border-left: 4px solid #1e3a5f;">
<div class="card-body">
<h5 class="fw-bold mb-3" style="color: #1e3a5f;">
<i class="bi bi-sliders me-2" style="color: #FF8600;"></i>
Estilos Avanzados
</h5>
<!-- Number inputs compactados: border_radius + border_width -->
<div class="row g-2 mb-2">
<div class="col-6">
<label for="letsTalkButtonBorderRadius" class="form-label small mb-1 fw-semibold" style="color: #495057;">
<i class="bi bi-border-radius me-1" style="color: #FF8600;"></i>
Radio esquinas
</label>
<input type="number" id="letsTalkButtonBorderRadius" class="form-control form-control-sm" value="6" min="0" max="30" step="1">
<small class="text-muted">En px (0-30)</small>
</div>
<div class="col-6">
<label for="letsTalkButtonBorderWidth" class="form-label small mb-1 fw-semibold" style="color: #495057;">
<i class="bi bi-border-width me-1" style="color: #FF8600;"></i>
Ancho de borde
</label>
<input type="number" id="letsTalkButtonBorderWidth" class="form-control form-control-sm" value="0" min="0" max="10" step="1">
<small class="text-muted">En px (0-10)</small>
</div>
</div>
<!-- Border color + border style compactados -->
<div class="row g-2 mb-2">
<div class="col-6">
<label for="letsTalkButtonBorderColor" class="form-label small mb-1 fw-semibold" style="color: #495057;">
<i class="bi bi-border-style me-1" style="color: #FF8600;"></i>
Color borde
</label>
<input type="color" id="letsTalkButtonBorderColor" class="form-control form-control-color w-100" value="#000000" title="Seleccionar color borde">
<small class="text-muted d-block mt-1" id="letsTalkButtonBorderColorValue">#000000</small>
</div>
<div class="col-6">
<label for="letsTalkButtonBorderStyle" class="form-label small mb-1 fw-semibold" style="color: #495057;">
<i class="bi bi-dash-lg me-1" style="color: #FF8600;"></i>
Estilo borde
</label>
<select id="letsTalkButtonBorderStyle" class="form-select form-select-sm">
<option value="solid" selected>Sólido</option>
<option value="dashed">Guiones</option>
<option value="dotted">Puntos</option>
</select>
</div>
</div>
<!-- Switch: enable_box_shadow -->
<div class="mb-2">
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="letsTalkButtonEnableBoxShadow">
<label class="form-check-label small" for="letsTalkButtonEnableBoxShadow" style="color: #495057;">
<i class="bi bi-box-seam me-1" style="color: #FF8600;"></i>
<strong>Habilitar sombra</strong>
</label>
</div>
</div>
<!-- Text input: box_shadow -->
<div class="mb-2">
<label for="letsTalkButtonBoxShadow" class="form-label small mb-1 fw-semibold" style="color: #495057;">
<i class="bi bi-shadow me-1" style="color: #FF8600;"></i>
CSS box-shadow
</label>
<input type="text" id="letsTalkButtonBoxShadow" class="form-control form-control-sm" value="0 2px 8px rgba(0, 0, 0, 0.15)" maxlength="100">
<small class="text-muted">Ejemplo: 0 4px 12px rgba(255, 134, 0, 0.3)</small>
</div>
<!-- Selects compactados: transition_speed + hover_effect -->
<div class="row g-2 mb-0">
<div class="col-6">
<label for="letsTalkButtonTransitionSpeed" class="form-label small mb-1 fw-semibold" style="color: #495057;">
<i class="bi bi-speedometer me-1" style="color: #FF8600;"></i>
Velocidad
</label>
<select id="letsTalkButtonTransitionSpeed" class="form-select form-select-sm">
<option value="fast">Rápido (0.2s)</option>
<option value="normal" selected>Normal (0.3s)</option>
<option value="slow">Lento (0.5s)</option>
</select>
</div>
<div class="col-6">
<label for="letsTalkButtonHoverEffect" class="form-label small mb-1 fw-semibold" style="color: #495057;">
<i class="bi bi-magic me-1" style="color: #FF8600;"></i>
Efecto hover
</label>
<select id="letsTalkButtonHoverEffect" class="form-select form-select-sm">
<option value="none" selected>Ninguno</option>
<option value="scale">Escala (1.05)</option>
<option value="brightness">Brillo</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

585
admin/components/component-navbar.php Normal file
View File

@@ -0,0 +1,585 @@
<?php
/**
* Navbar Component - Admin Interface v2.0
* Sigue los 4 patrones obligatorios de Top Bar
*
* @package Apus_Theme
* @since 2.0.0
*/
// Prevent direct access
if (!defined('ABSPATH')) {
exit;
}
?>
<!-- ============================================================
TAB: NAVBAR CONFIGURATION
============================================================ -->
<div class="tab-pane fade"
id="navbarTab"
role="tabpanel"
aria-labelledby="navbar-config-tab">
<!-- ========================================
PATRÓN 1: HEADER CON GRADIENTE
======================================== -->
<div class="rounded p-4 mb-4 shadow text-white" style="background: linear-gradient(135deg, #0E2337 0%, #1e3a5f 100%); border-left: 4px solid #FF8600;">
<div class="d-flex align-items-center justify-content-between flex-wrap gap-3">
<div>
<h3 class="h4 mb-1 fw-bold">
<i class="bi bi-list me-2" style="color: #FF8600;"></i>
Configuración Navbar
</h3>
<p class="mb-0 small" style="opacity: 0.85;">
Personaliza el menú de navegación principal de tu sitio
</p>
</div>
<button type="button" class="btn btn-sm btn-outline-light" id="resetNavbarDefaults">
<i class="bi bi-arrow-counterclockwise me-1"></i>
Restaurar valores por defecto
</button>
</div>
</div>
<!-- ========================================
PATRÓN 2: LAYOUT 2 COLUMNAS
======================================== -->
<div class="row g-3">
<!-- ========================================
COLUMNA IZQUIERDA
======================================== -->
<div class="col-lg-6">
<!-- ========================================
GRUPO 1: ACTIVACIÓN Y VISIBILIDAD
PATRÓN 3: CARD CON BORDER-LEFT NAVY
======================================== -->
<div class="card shadow-sm mb-3" style="border-left: 4px solid #1e3a5f;">
<div class="card-body">
<h5 class="fw-bold mb-3" style="color: #1e3a5f;">
<i class="bi bi-toggle-on me-2" style="color: #FF8600;"></i>
Activación y Visibilidad
</h5>
<!-- PATRÓN 4: SWITCHES VERTICALES -->
<!-- Enabled -->
<div class="mb-2">
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="navbarEnabled" checked="">
<label class="form-check-label small" for="navbarEnabled" style="color: #495057;">
<i class="bi bi-power me-1" style="color: #FF8600;"></i>
<strong>Activar Navbar</strong>
</label>
</div>
</div>
<!-- Show on Mobile -->
<div class="mb-2">
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="navbarShowOnMobile" checked="">
<label class="form-check-label small" for="navbarShowOnMobile" style="color: #495057;">
<i class="bi bi-phone me-1" style="color: #FF8600;"></i>
<strong>Mostrar en Mobile</strong> <span class="text-muted">(&lt;768px)</span>
</label>
</div>
</div>
<!-- Show on Desktop -->
<div class="mb-0">
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="navbarShowOnDesktop" checked="">
<label class="form-check-label small" for="navbarShowOnDesktop" style="color: #495057;">
<i class="bi bi-display me-1" style="color: #FF8600;"></i>
<strong>Mostrar en Desktop</strong> <span class="text-muted">(≥768px)</span>
</label>
</div>
</div>
<!-- Selects compactados en fila -->
<div class="row g-2 mt-3">
<div class="col-6">
<div class="form-group mb-0">
<label for="navbarPosition" class="text-secondary fw-medium mb-1">
Posición
</label>
<select id="navbarPosition" class="form-select form-select-sm">
<option value="sticky" selected>Sticky (fija al scroll)</option>
<option value="static">Static (normal)</option>
<option value="fixed">Fixed (siempre fija)</option>
</select>
</div>
</div>
<div class="col-6">
<div class="form-group mb-0">
<label for="navbarBreakpoint" class="text-secondary fw-medium mb-1">
Breakpoint
</label>
<select id="navbarBreakpoint" class="form-select form-select-sm">
<option value="sm">SM (576px)</option>
<option value="md">MD (768px)</option>
<option value="lg" selected>LG (992px)</option>
<option value="xl">XL (1200px)</option>
<option value="xxl">XXL (1400px)</option>
</select>
</div>
</div>
</div>
</div>
</div>
<!-- ========================================
GRUPO 2: COLORES PERSONALIZADOS
======================================== -->
<div class="card shadow-sm mb-3" style="border-left: 4px solid #1e3a5f;">
<div class="card-body">
<h5 class="fw-bold mb-3" style="color: #1e3a5f;">
<i class="bi bi-palette me-2" style="color: #FF8600;"></i>
Colores Personalizados
</h5>
<!-- 7 colores en grid 2x2 (patrón Top Bar) -->
<div class="row g-2 mb-2">
<div class="col-6">
<label for="navbarBgColor" class="form-label small mb-1 fw-semibold" style="color: #495057;">
<i class="bi bi-paint-bucket me-1" style="color: #FF8600;"></i>
Color de fondo
</label>
<input type="color" id="navbarBgColor" class="form-control form-control-color w-100" value="#1e3a5f" title="Seleccionar color de fondo">
<small class="text-muted d-block mt-1" id="navbarBgColorValue">#1e3a5f</small>
</div>
<div class="col-6">
<label for="navbarTextColor" class="form-label small mb-1 fw-semibold" style="color: #495057;">
<i class="bi bi-fonts me-1" style="color: #FF8600;"></i>
Color de texto
</label>
<input type="color" id="navbarTextColor" class="form-control form-control-color w-100" value="#ffffff" title="Seleccionar color de texto">
<small class="text-muted d-block mt-1" id="navbarTextColorValue">#ffffff</small>
</div>
<div class="col-6">
<label for="navbarLinkHoverColor" class="form-label small mb-1 fw-semibold" style="color: #495057;">
<i class="bi bi-cursor me-1" style="color: #FF8600;"></i>
Color hover links
</label>
<input type="color" id="navbarLinkHoverColor" class="form-control form-control-color w-100" value="#FF8600" title="Seleccionar color hover enlaces">
<small class="text-muted d-block mt-1" id="navbarLinkHoverColorValue">#FF8600</small>
</div>
<div class="col-6">
<label for="navbarLinkHoverBgColor" class="form-label small mb-1 fw-semibold" style="color: #495057;">
<i class="bi bi-square-fill me-1" style="color: #FF8600;"></i>
Background hover
</label>
<input type="color" id="navbarLinkHoverBgColor" class="form-control form-control-color w-100" value="#FF8600" title="Seleccionar color fondo hover">
<small class="text-muted d-block mt-1" id="navbarLinkHoverBgColorValue">#FF8600</small>
</div>
<div class="col-6">
<label for="navbarDropdownBgColor" class="form-label small mb-1 fw-semibold" style="color: #495057;">
<i class="bi bi-card-text me-1" style="color: #FF8600;"></i>
Dropdown BG
</label>
<input type="color" id="navbarDropdownBgColor" class="form-control form-control-color w-100" value="#ffffff" title="Seleccionar color fondo dropdown">
<small class="text-muted d-block mt-1" id="navbarDropdownBgColorValue">#ffffff</small>
</div>
<div class="col-6">
<label for="navbarDropdownItemColor" class="form-label small mb-1 fw-semibold" style="color: #495057;">
<i class="bi bi-text-left me-1" style="color: #FF8600;"></i>
Item Color
</label>
<input type="color" id="navbarDropdownItemColor" class="form-control form-control-color w-100" value="#495057" title="Seleccionar color items dropdown">
<small class="text-muted d-block mt-1" id="navbarDropdownItemColorValue">#495057</small>
</div>
<div class="col-6">
<label for="navbarDropdownItemHoverColor" class="form-label small mb-1 fw-semibold" style="color: #495057;">
<i class="bi bi-hand-index me-1" style="color: #FF8600;"></i>
Item Hover
</label>
<input type="color" id="navbarDropdownItemHoverColor" class="form-control form-control-color w-100" value="#FF8600" title="Seleccionar color hover items dropdown">
<small class="text-muted d-block mt-1" id="navbarDropdownItemHoverColorValue">#FF8600</small>
</div>
</div>
</div>
</div>
<!-- ========================================
GRUPO 3: TIPOGRAFÍA
======================================== -->
<div class="card shadow-sm mb-3" style="border-left: 4px solid #1e3a5f;">
<div class="card-body">
<h5 class="fw-bold mb-3" style="color: #1e3a5f;">
<i class="bi bi-fonts me-2" style="color: #FF8600;"></i>
Tipografía
</h5>
<div class="row g-2">
<div class="col-6">
<div class="form-group mb-0">
<label for="navbarFontSize" class="text-secondary fw-medium mb-1">
Tamaño de fuente
</label>
<select id="navbarFontSize" class="form-select form-select-sm">
<option value="small">Pequeño (0.8rem)</option>
<option value="normal" selected>Normal (0.9rem)</option>
<option value="large">Grande (1rem)</option>
</select>
</div>
</div>
<div class="col-6">
<div class="form-group mb-0">
<label for="navbarFontWeight" class="text-secondary fw-medium mb-1">
Peso de fuente
</label>
<select id="navbarFontWeight" class="form-select form-select-sm">
<option value="400">Normal (400)</option>
<option value="500" selected>Medium (500)</option>
<option value="600">Semibold (600)</option>
<option value="700">Bold (700)</option>
</select>
</div>
</div>
</div>
</div>
</div>
<!-- ========================================
GRUPO 4: EFECTOS VISUALES
======================================== -->
<div class="card shadow-sm mb-3" style="border-left: 4px solid #1e3a5f;">
<div class="card-body">
<h5 class="fw-bold mb-3" style="color: #1e3a5f;">
<i class="bi bi-magic me-2" style="color: #FF8600;"></i>
Efectos Visuales
</h5>
<!-- Switches verticales -->
<div class="mb-2">
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="navbarEnableBoxShadow" checked="">
<label class="form-check-label small" for="navbarEnableBoxShadow" style="color: #495057;">
<i class="bi bi-box-arrow-down me-1" style="color: #FF8600;"></i>
<strong>Habilitar Box Shadow</strong>
</label>
</div>
</div>
<div class="mb-2">
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="navbarEnableUnderlineEffect" checked="">
<label class="form-check-label small" for="navbarEnableUnderlineEffect" style="color: #495057;">
<i class="bi bi-dash-lg me-1" style="color: #FF8600;"></i>
<strong>Línea animada al hover</strong>
</label>
</div>
</div>
<div class="mb-3">
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="navbarEnableHoverBackground" checked="">
<label class="form-check-label small" for="navbarEnableHoverBackground" style="color: #495057;">
<i class="bi bi-square-fill me-1" style="color: #FF8600;"></i>
<strong>Background al hover</strong>
</label>
</div>
</div>
<!-- Selects y números compactados -->
<div class="row g-2">
<div class="col-6">
<div class="form-group mb-0">
<label for="navbarBoxShadowIntensity" class="text-secondary fw-medium mb-1">
Intensidad sombra
</label>
<select id="navbarBoxShadowIntensity" class="form-select form-select-sm">
<option value="none">Sin sombra</option>
<option value="light">Ligera</option>
<option value="normal" selected>Normal</option>
<option value="strong">Fuerte</option>
</select>
</div>
</div>
<div class="col-6">
<div class="form-group mb-0">
<label for="navbarBorderRadius" class="text-secondary fw-medium mb-1">
Border radius (px)
</label>
<input type="number"
id="navbarBorderRadius"
class="form-control form-control-sm"
value="4"
min="0"
max="20">
</div>
</div>
</div>
</div>
</div>
</div> <!-- Fin columna izquierda -->
<!-- ========================================
COLUMNA DERECHA
======================================== -->
<div class="col-lg-6">
<!-- ========================================
GRUPO 5: SPACING
======================================== -->
<div class="card shadow-sm mb-3" style="border-left: 4px solid #1e3a5f;">
<div class="card-body">
<h5 class="fw-bold mb-3" style="color: #1e3a5f;">
<i class="bi bi-arrows-expand me-2" style="color: #FF8600;"></i>
Espaciado
</h5>
<div class="row g-2">
<div class="col-md-4">
<div class="form-group mb-3">
<label for="navbarPaddingVertical" class="text-secondary fw-medium mb-1">
Padding navbar (rem)
</label>
<input type="number"
id="navbarPaddingVertical"
class="form-control form-control-sm"
value="0.75"
min="0"
max="3"
step="0.05">
</div>
</div>
<div class="col-md-4">
<div class="form-group mb-3">
<label for="navbarLinkPaddingVertical" class="text-secondary fw-medium mb-1">
Padding links V (rem)
</label>
<input type="number"
id="navbarLinkPaddingVertical"
class="form-control form-control-sm"
value="0.5"
min="0"
max="2"
step="0.05">
</div>
</div>
<div class="col-md-4">
<div class="form-group mb-3">
<label for="navbarLinkPaddingHorizontal" class="text-secondary fw-medium mb-1">
Padding links H (rem)
</label>
<input type="number"
id="navbarLinkPaddingHorizontal"
class="form-control form-control-sm"
value="0.65"
min="0"
max="2"
step="0.05">
</div>
</div>
</div>
</div>
</div>
<!-- ========================================
GRUPO 6: LET'S TALK BUTTON
======================================== -->
<div class="card shadow-sm mb-3" style="border-left: 4px solid #1e3a5f;">
<div class="card-body">
<h5 class="fw-bold mb-3" style="color: #1e3a5f;">
<i class="bi bi-lightning-charge-fill me-2" style="color: #FF8600;"></i>
Botón "Let's Talk"
</h5>
<!-- Switches verticales -->
<div class="mb-2">
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="navbarLetsTalkEnabled" checked="">
<label class="form-check-label small" for="navbarLetsTalkEnabled" style="color: #495057;">
<i class="bi bi-power me-1" style="color: #FF8600;"></i>
<strong>Mostrar botón</strong>
</label>
</div>
</div>
<div class="mb-3">
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="navbarLetsTalkShowIcon" checked="">
<label class="form-check-label small" for="navbarLetsTalkShowIcon" style="color: #495057;">
<i class="bi bi-eye me-1" style="color: #FF8600;"></i>
<strong>Mostrar icono</strong>
</label>
</div>
</div>
<!-- Texto e icono -->
<div class="row g-2">
<div class="col-6">
<div class="form-group mb-3">
<label for="navbarLetsTalkText" class="text-secondary fw-medium mb-1">
Texto del botón
</label>
<input type="text"
id="navbarLetsTalkText"
class="form-control form-control-sm"
value="Let's Talk"
maxlength="30"
placeholder="Let's Talk">
</div>
</div>
<div class="col-6">
<div class="form-group mb-3">
<label for="navbarLetsTalkIconClass" class="text-secondary fw-medium mb-1">
Clase del icono
</label>
<input type="text"
id="navbarLetsTalkIconClass"
class="form-control form-control-sm"
value="bi bi-lightning-charge-fill"
maxlength="50"
placeholder="bi bi-lightning-charge-fill">
</div>
</div>
</div>
<!-- Posición -->
<div class="form-group mb-0">
<label for="navbarLetsTalkPosition" class="text-secondary fw-medium mb-1">
Posición dentro del navbar
</label>
<select id="navbarLetsTalkPosition" class="form-select form-select-sm">
<option value="left">Izquierda</option>
<option value="center">Centro</option>
<option value="right" selected>Derecha</option>
</select>
</div>
</div>
</div>
<!-- ========================================
GRUPO 7: DROPDOWN
======================================== -->
<div class="card shadow-sm mb-3" style="border-left: 4px solid #1e3a5f;">
<div class="card-body">
<h5 class="fw-bold mb-3" style="color: #1e3a5f;">
<i class="bi bi-chevron-down me-2" style="color: #FF8600;"></i>
Dropdown
</h5>
<!-- Switch vertical -->
<div class="mb-3">
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="navbarDropdownEnableHoverDesktop" checked="">
<label class="form-check-label small" for="navbarDropdownEnableHoverDesktop" style="color: #495057;">
<i class="bi bi-cursor me-1" style="color: #FF8600;"></i>
<strong>Activar al hover (desktop)</strong>
</label>
</div>
</div>
<!-- Números y selects -->
<div class="row g-2">
<div class="col-6">
<div class="form-group mb-3">
<label for="navbarDropdownMaxHeight" class="text-secondary fw-medium mb-1">
Altura máxima (vh)
</label>
<input type="number"
id="navbarDropdownMaxHeight"
class="form-control form-control-sm"
value="70"
min="30"
max="90">
</div>
</div>
<div class="col-6">
<div class="form-group mb-3">
<label for="navbarDropdownBorderRadius" class="text-secondary fw-medium mb-1">
Border radius (px)
</label>
<input type="number"
id="navbarDropdownBorderRadius"
class="form-control form-control-sm"
value="8"
min="0"
max="20">
</div>
</div>
</div>
<div class="row g-2">
<div class="col-6">
<div class="form-group mb-0">
<label for="navbarDropdownItemPaddingVertical" class="text-secondary fw-medium mb-1">
Padding items V (rem)
</label>
<input type="number"
id="navbarDropdownItemPaddingVertical"
class="form-control form-control-sm"
value="0.5"
min="0"
max="2"
step="0.05">
</div>
</div>
<div class="col-6">
<div class="form-group mb-0">
<label for="navbarDropdownItemPaddingHorizontal" class="text-secondary fw-medium mb-1">
Padding items H (rem)
</label>
<input type="number"
id="navbarDropdownItemPaddingHorizontal"
class="form-control form-control-sm"
value="1.25"
min="0"
max="3"
step="0.05">
</div>
</div>
</div>
</div>
</div>
<!-- ========================================
GRUPO 8: AVANZADO (OPCIONAL)
======================================== -->
<div class="card shadow-sm mb-3" style="border-left: 4px solid #1e3a5f;">
<div class="card-body">
<h5 class="fw-bold mb-3" style="color: #1e3a5f;">
<i class="bi bi-gear me-2" style="color: #FF8600;"></i>
Avanzado
</h5>
<div class="row g-2">
<div class="col-6">
<div class="form-group mb-0">
<label for="navbarZIndex" class="text-secondary fw-medium mb-1">
Z-index
</label>
<input type="number"
id="navbarZIndex"
class="form-control form-control-sm"
value="1030"
min="0"
max="9999">
</div>
</div>
<div class="col-6">
<div class="form-group mb-0">
<label for="navbarTransitionSpeed" class="text-secondary fw-medium mb-1">
Velocidad transiciones
</label>
<select id="navbarTransitionSpeed" class="form-select form-select-sm">
<option value="fast">Rápida (0.2s)</option>
<option value="normal" selected>Normal (0.3s)</option>
<option value="slow">Lenta (0.5s)</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div> <!-- Fin columna derecha -->
</div> <!-- Fin row g-3 -->
</div> <!-- Fin tab-pane -->

237
admin/components/component-top-bar.php Normal file
View File

@@ -0,0 +1,237 @@
<?php
/**
* Admin Component: Top Bar Configuration
*
* @package Apus_Theme
* @subpackage Admin_Panel
* @since 2.0.0
*/
if (!defined('ABSPATH')) {
exit;
}
?>
<div class="tab-pane fade show active" id="topBarTab" role="tabpanel">
<!-- Header del Tab -->
<div class="rounded p-4 mb-4 shadow text-white" style="background: linear-gradient(135deg, #0E2337 0%, #1e3a5f 100%); border-left: 4px solid #FF8600;">
<div class="d-flex align-items-center justify-content-between flex-wrap gap-3">
<div>
<h3 class="h4 mb-1 fw-bold">
<i class="bi bi-megaphone-fill me-2" style="color: #FF8600;"></i>
Configuración Top Bar
</h3>
<p class="mb-0 small" style="opacity: 0.85;">
Personaliza la barra de anuncios superior de tu sitio
</p>
</div>
<button type="button" class="btn btn-sm btn-outline-light" id="resetTopBarDefaults">
<i class="bi bi-arrow-counterclockwise me-1"></i>
Restaurar valores por defecto
</button>
</div>
</div>
<!-- Grid: 2 columnas + 1 fila completa -->
<div class="row g-3">
<!-- COLUMNA IZQUIERDA -->
<div class="col-lg-6">
<!-- GRUPO 1: ACTIVACIÓN -->
<div class="card shadow-sm mb-3" style="border-left: 4px solid #1e3a5f;">
<div class="card-body">
<h5 class="fw-bold mb-3" style="color: #1e3a5f;">
<i class="bi bi-toggle-on me-2" style="color: #FF8600;"></i>
Activación y Visibilidad
</h5>
<!-- Enabled -->
<div class="mb-2">
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="topBarEnabled" checked="">
<label class="form-check-label small" for="topBarEnabled" style="color: #495057;">
<i class="bi bi-power me-1" style="color: #FF8600;"></i>
<strong>Activar Top Bar</strong>
</label>
</div>
</div>
<!-- Show on Mobile -->
<div class="mb-2">
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="topBarShowOnMobile" checked="">
<label class="form-check-label small" for="topBarShowOnMobile" style="color: #495057;">
<i class="bi bi-phone me-1" style="color: #FF8600;"></i>
<strong>Mostrar en Mobile</strong> <span class="text-muted">(&lt;768px)</span>
</label>
</div>
</div>
<!-- Show on Desktop -->
<div class="mb-0">
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="topBarShowOnDesktop" checked="">
<label class="form-check-label small" for="topBarShowOnDesktop" style="color: #495057;">
<i class="bi bi-display me-1" style="color: #FF8600;"></i>
<strong>Mostrar en Desktop</strong> <span class="text-muted">(≥768px)</span>
</label>
</div>
</div>
</div>
</div>
<!-- GRUPO 2: ESTILOS -->
<div class="card shadow-sm mb-3" style="border-left: 4px solid #1e3a5f;">
<div class="card-body">
<h5 class="fw-bold mb-3" style="color: #1e3a5f;">
<i class="bi bi-palette me-2" style="color: #FF8600;"></i>
Estilos Personalizados
</h5>
<!-- 4 colores en grid 2x2 -->
<div class="row g-2 mb-2">
<div class="col-6">
<label for="topBarBgColor" class="form-label small mb-1 fw-semibold" style="color: #495057;">
<i class="bi bi-paint-bucket me-1" style="color: #FF8600;"></i>
Color de fondo
</label>
<input type="color" id="topBarBgColor" class="form-control form-control-color w-100" value="#0E2337" title="Seleccionar color de fondo">
<small class="text-muted d-block mt-1" id="topBarBgColorValue">#0E2337</small>
</div>
<div class="col-6">
<label for="topBarTextColor" class="form-label small mb-1 fw-semibold" style="color: #495057;">
<i class="bi bi-fonts me-1" style="color: #FF8600;"></i>
Color de texto
</label>
<input type="color" id="topBarTextColor" class="form-control form-control-color w-100" value="#ffffff" title="Seleccionar color de texto">
<small class="text-muted d-block mt-1" id="topBarTextColorValue">#FFFFFF</small>
</div>
<div class="col-6">
<label for="topBarHighlightColor" class="form-label small mb-1 fw-semibold" style="color: #495057;">
<i class="bi bi-star me-1" style="color: #FF8600;"></i>
Color destacado
</label>
<input type="color" id="topBarHighlightColor" class="form-control form-control-color w-100" value="#FF8600" title="Seleccionar color destacado">
<small class="text-muted d-block mt-1" id="topBarHighlightColorValue">#FF8600</small>
</div>
<div class="col-6">
<label for="topBarLinkHoverColor" class="form-label small mb-1 fw-semibold" style="color: #495057;">
<i class="bi bi-cursor me-1" style="color: #FF8600;"></i>
Hover enlace
</label>
<input type="color" id="topBarLinkHoverColor" class="form-control form-control-color w-100" value="#FF6B35" title="Seleccionar color hover del enlace">
<small class="text-muted d-block mt-1" id="topBarLinkHoverColorValue">#FF6B35</small>
</div>
</div>
<!-- Tamaño de fuente -->
<div class="mb-0">
<label for="topBarFontSize" class="form-label small mb-1 fw-semibold" style="color: #495057;">
<i class="bi bi-type me-1" style="color: #FF8600;"></i>
Tamaño de fuente
</label>
<select id="topBarFontSize" class="form-select form-select-sm">
<option value="small">Pequeño (0.8rem)</option>
<option value="normal" selected="">Normal (0.9rem)</option>
<option value="large">Grande (1rem)</option>
</select>
</div>
</div>
</div>
</div>
<!-- COLUMNA DERECHA -->
<div class="col-lg-6">
<!-- GRUPO 3: CONTENIDO -->
<div class="card shadow-sm mb-3" style="border-left: 4px solid #1e3a5f;">
<div class="card-body">
<h5 class="fw-bold mb-3" style="color: #1e3a5f;">
<i class="bi bi-card-text me-2" style="color: #FF8600;"></i>
Contenido y Mensajes
</h5>
<!-- Icono + mostrar -->
<div class="row g-2 mb-2">
<div class="col-8">
<label for="topBarIconClass" class="form-label small mb-1 fw-semibold" style="color: #495057;">
<i class="bi bi-emoji-smile me-1" style="color: #FF8600;"></i>
Clase del icono <span class="badge bg-secondary" style="font-size: 0.65rem;">Bootstrap Icons</span>
</label>
<input type="text" id="topBarIconClass" class="form-control form-control-sm" placeholder="bi bi-megaphone-fill" value="bi bi-megaphone-fill" maxlength="50">
<small class="text-muted d-block mt-1">
<i class="bi bi-info-circle me-1"></i>
Ver: <a href="https://icons.getbootstrap.com/" target="_blank" class="text-decoration-none" style="color: #FF8600;">Bootstrap Icons <i class="bi bi-box-arrow-up-right"></i></a>
</small>
</div>
<div class="col-4">
<label class="form-label small mb-1 fw-semibold" style="color: #495057;">Opciones</label>
<div class="form-check form-switch mt-2">
<input class="form-check-input" type="checkbox" id="topBarShowIcon" checked="">
<label class="form-check-label small" for="topBarShowIcon" style="color: #495057;">Mostrar</label>
</div>
</div>
</div>
<!-- Texto destacado -->
<div class="mb-2">
<label for="topBarHighlightText" class="form-label small mb-1 fw-semibold" style="color: #495057;">
<i class="bi bi-bookmark-star me-1" style="color: #FF8600;"></i>
Texto destacado <span class="badge text-dark" style="background-color: #FFB800; font-size: 0.65rem;">Opcional</span>
</label>
<input type="text" id="topBarHighlightText" class="form-control form-control-sm" placeholder="Ej: &quot;Nuevo:&quot; o &quot;Promoción:&quot;" value="Nuevo:" maxlength="30">
</div>
<!-- Mensaje principal -->
<div class="mb-2">
<label for="topBarMessageText" class="form-label small mb-1 fw-semibold" style="color: #495057;">
<i class="bi bi-chat-left-text me-1" style="color: #FF8600;"></i>
Mensaje principal <span class="text-danger">*</span>
<span class="float-end text-muted"><span id="topBarMessageTextCount" class="fw-bold">77</span>/250</span>
</label>
<textarea id="topBarMessageText" class="form-control form-control-sm" rows="2" maxlength="250" placeholder="Ej: Accede a más de 200,000 Análisis de Precios Unitarios actualizados para 2025." required="">Accede a más de 200,000 Análisis de Precios Unitarios actualizados para 2025.</textarea>
<div class="progress mt-1" style="height: 3px;">
<div id="topBarMessageTextProgress" class="progress-bar bg-orange-primary" role="progressbar" style="width: 30.8%; background-color: rgb(255, 134, 0);" aria-valuenow="77" aria-valuemin="0" aria-valuemax="250"></div>
</div>
</div>
<!-- Enlace (3 campos compactos) -->
<div class="row g-2 mb-2">
<div class="col-5">
<label for="topBarLinkText" class="form-label small mb-1 fw-semibold" style="color: #495057;">
<i class="bi bi-link-45deg me-1" style="color: #FF8600;"></i>
Texto enlace
</label>
<input type="text" id="topBarLinkText" class="form-control form-control-sm" placeholder="Ver Catálogo" value="Ver Catálogo →" maxlength="50">
</div>
<div class="col-5">
<label for="topBarLinkUrl" class="form-label small mb-1 fw-semibold" style="color: #495057;">
<i class="bi bi-globe me-1" style="color: #FF8600;"></i>
URL
</label>
<input type="url" id="topBarLinkUrl" class="form-control form-control-sm" placeholder="/catalogo" value="/catalogo">
</div>
<div class="col-2">
<label for="topBarLinkTarget" class="form-label small mb-1 fw-semibold" style="color: #495057;">
<i class="bi bi-window me-1" style="color: #FF8600;"></i>
Target
</label>
<select id="topBarLinkTarget" class="form-select form-select-sm">
<option value="_self" selected="">_self</option>
<option value="_blank">_blank</option>
</select>
</div>
</div>
<div class="mb-0">
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="topBarShowLink" checked="">
<label class="form-check-label small" for="topBarShowLink" style="color: #495057;">
<strong>Mostrar enlace</strong>
</label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>