238 lines
15 KiB
PHP
238 lines
15 KiB
PHP
<?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">(<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: "Nuevo:" o "Promoción:"" 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>
|