394 lines
22 KiB
PHP
394 lines
22 KiB
PHP
<?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">(<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>
|