605 lines
35 KiB
PHP
605 lines
35 KiB
PHP
<?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">(<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>
|