531 lines
18 KiB
PHP
531 lines
18 KiB
PHP
<?php
|
|
/**
|
|
* Admin Panel - Main Page
|
|
*
|
|
* Interfaz de administración de componentes del tema
|
|
*
|
|
* @package Apus_Theme
|
|
* @since 2.0.0
|
|
*/
|
|
|
|
if (!defined('ABSPATH')) {
|
|
exit;
|
|
}
|
|
?>
|
|
|
|
<div class="wrap apus-admin-panel">
|
|
<h1><?php echo esc_html(get_admin_page_title()); ?></h1>
|
|
<p class="description">Configure los componentes del tema Apus</p>
|
|
|
|
<!-- Navigation Tabs -->
|
|
<ul class="nav nav-tabs" role="tablist">
|
|
<li class="nav-item">
|
|
<a class="nav-link active" data-bs-toggle="tab" data-bs-target="#topBarTab" href="#topBarTab" role="tab">
|
|
<i class="bi bi-megaphone-fill me-2"></i>
|
|
Top Bar
|
|
</a>
|
|
</li>
|
|
<!-- Más tabs aquí: Navbar, Hero, Footer, etc. -->
|
|
</ul>
|
|
|
|
<!-- Tab Content -->
|
|
<div class="tab-content mt-3">
|
|
<!-- ============================= -->
|
|
<!-- TAB: TOP BAR - VERSIÓN MEJORADA -->
|
|
<!-- ============================= -->
|
|
<div id="topBarTab" class="tab-pane fade show active" role="tabpanel">
|
|
<!-- Header del Tab -->
|
|
<div class="tab-header mb-4">
|
|
<div class="d-flex align-items-center justify-content-between">
|
|
<div>
|
|
<h3 class="mb-1 text-navy-primary">
|
|
<i class="bi bi-megaphone-fill me-2 text-orange-primary"></i>
|
|
Configuración Top Bar
|
|
</h3>
|
|
<p class="text-neutral-600 mb-0">
|
|
Personaliza la barra de anuncios superior de tu sitio
|
|
</p>
|
|
</div>
|
|
<button type="button" class="btn btn-sm btn-outline-secondary" id="resetTopBarDefaults">
|
|
<i class="bi bi-arrow-counterclockwise me-1"></i>
|
|
Restaurar valores por defecto
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Row para 2 cards por fila -->
|
|
<div class="row">
|
|
<!-- ============================= -->
|
|
<!-- GRUPO 1: ACTIVACIÓN -->
|
|
<!-- ============================= -->
|
|
<div class="col-md-6">
|
|
<div class="form-section card shadow-sm border-0 mb-4 h-100">
|
|
<div class="card-body">
|
|
<h4 class="section-title">
|
|
<span class="title-icon">
|
|
<i class="bi bi-toggle-on"></i>
|
|
</span>
|
|
Activación y Visibilidad
|
|
</h4>
|
|
|
|
<!-- Enabled -->
|
|
<div class="mb-4">
|
|
<label class="form-label text-neutral-700 fw-medium mb-3">
|
|
<i class="bi bi-power text-orange-primary me-1"></i>
|
|
Estado del Componente
|
|
</label>
|
|
<div class="toggle-container">
|
|
<div class="form-check form-switch form-switch-lg">
|
|
<input class="form-check-input"
|
|
type="checkbox"
|
|
id="topBarEnabled"
|
|
role="switch"
|
|
checked>
|
|
<label class="form-check-label" for="topBarEnabled">
|
|
Activar Top Bar
|
|
</label>
|
|
</div>
|
|
<small class="form-text text-neutral-700 d-block mt-2">
|
|
Activa o desactiva el Top Bar en todo el sitio
|
|
</small>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Show on Mobile -->
|
|
<div class="mb-4">
|
|
<label class="form-label text-neutral-700 fw-medium mb-3">
|
|
<i class="bi bi-phone text-orange-primary me-1"></i>
|
|
Visibilidad Mobile
|
|
</label>
|
|
<div class="toggle-container">
|
|
<div class="form-check form-switch form-switch-lg">
|
|
<input class="form-check-input"
|
|
type="checkbox"
|
|
id="topBarShowOnMobile"
|
|
role="switch"
|
|
checked>
|
|
<label class="form-check-label" for="topBarShowOnMobile">
|
|
Mostrar en dispositivos móviles
|
|
</label>
|
|
</div>
|
|
<small class="form-text text-neutral-700 d-block mt-2">
|
|
Pantallas menores a 768px
|
|
</small>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Show on Desktop -->
|
|
<div class="mb-0">
|
|
<label class="form-label text-neutral-700 fw-medium mb-3">
|
|
<i class="bi bi-display text-orange-primary me-1"></i>
|
|
Visibilidad Desktop
|
|
</label>
|
|
<div class="toggle-container">
|
|
<div class="form-check form-switch form-switch-lg">
|
|
<input class="form-check-input"
|
|
type="checkbox"
|
|
id="topBarShowOnDesktop"
|
|
role="switch"
|
|
checked>
|
|
<label class="form-check-label" for="topBarShowOnDesktop">
|
|
Mostrar en desktop
|
|
</label>
|
|
</div>
|
|
<small class="form-text text-neutral-700 d-block mt-2">
|
|
Pantallas de 768px en adelante
|
|
</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<!-- ============================= -->
|
|
<!-- GRUPO 2: CONTENIDO -->
|
|
<!-- ============================= -->
|
|
<div class="col-md-6">
|
|
<div class="form-section card shadow-sm border-0 mb-4 h-100">
|
|
<div class="card-body">
|
|
<h4 class="section-title">
|
|
<span class="title-icon">
|
|
<i class="bi bi-card-text"></i>
|
|
</span>
|
|
Contenido y Mensajes
|
|
</h4>
|
|
|
|
<!-- Icono -->
|
|
<div class="row g-4 mb-4">
|
|
<div class="col-md-8">
|
|
<div class="form-group">
|
|
<label for="topBarIconClass" class="form-label text-neutral-700 fw-medium">
|
|
<i class="bi bi-emoji-smile text-orange-primary me-1"></i>
|
|
Clase del icono
|
|
<span class="badge bg-neutral-100 text-neutral-600 ms-2">Bootstrap Icons</span>
|
|
</label>
|
|
<div class="input-group input-group-merge">
|
|
<span class="input-group-text bg-neutral-50 border-end-0">
|
|
<i class="bi bi-code-slash text-neutral-600"></i>
|
|
</span>
|
|
<input type="text"
|
|
id="topBarIconClass"
|
|
class="form-control border-start-0 ps-0"
|
|
placeholder="Ej: bi bi-megaphone-fill"
|
|
maxlength="50"
|
|
value="bi bi-megaphone-fill">
|
|
</div>
|
|
<small class="form-text text-neutral-700 d-flex align-items-center mt-2">
|
|
<i class="bi bi-info-circle me-1"></i>
|
|
Ver iconos disponibles:
|
|
<a href="https://icons.getbootstrap.com/" target="_blank" class="ms-1 text-orange-primary">
|
|
Bootstrap Icons <i class="bi bi-box-arrow-up-right ms-1"></i>
|
|
</a>
|
|
</small>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-4">
|
|
<div class="form-group">
|
|
<label class="form-label text-neutral-700 fw-medium mb-3">
|
|
Opciones de Icono
|
|
</label>
|
|
<div class="toggle-container">
|
|
<div class="form-check form-switch form-switch-lg">
|
|
<input class="form-check-input"
|
|
type="checkbox"
|
|
id="topBarShowIcon"
|
|
role="switch"
|
|
checked>
|
|
<label class="form-check-label" for="topBarShowIcon">
|
|
Mostrar icono
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Texto destacado -->
|
|
<div class="row g-4 mb-4">
|
|
<div class="col-md-12">
|
|
<div class="form-group">
|
|
<label for="topBarHighlightText" class="form-label text-neutral-700 fw-medium">
|
|
<i class="bi bi-bookmark-star text-orange-primary me-1"></i>
|
|
Texto destacado
|
|
<span class="badge bg-warning-subtle text-warning-emphasis ms-2">Opcional</span>
|
|
</label>
|
|
<input type="text"
|
|
id="topBarHighlightText"
|
|
class="form-control form-control-lg"
|
|
placeholder='Ej: "Nuevo:" o "Promoción:"'
|
|
maxlength="30"
|
|
value="Nuevo:">
|
|
<small class="form-text text-neutral-700 d-flex align-items-center mt-2">
|
|
<i class="bi bi-lightbulb text-warning me-1"></i>
|
|
Se muestra en <strong class="mx-1">negritas</strong> y con <span class="text-orange-primary fw-bold mx-1">color destacado</span>. Dejar vacío para omitir.
|
|
</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Mensaje principal -->
|
|
<div class="row g-4 mb-4">
|
|
<div class="col-md-12">
|
|
<div class="form-group">
|
|
<label for="topBarMessageText" class="form-label text-neutral-700 fw-medium">
|
|
<i class="bi bi-chat-left-text text-orange-primary me-1"></i>
|
|
Mensaje principal
|
|
<span class="badge bg-danger-subtle text-danger-emphasis ms-2">Requerido</span>
|
|
</label>
|
|
<textarea id="topBarMessageText"
|
|
class="form-control form-control-lg"
|
|
rows="3"
|
|
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="d-flex justify-content-between align-items-center mt-2">
|
|
<small class="form-text text-neutral-700">
|
|
<i class="bi bi-info-circle me-1"></i>
|
|
Mensaje que se mostrará en la barra superior
|
|
</small>
|
|
<small class="form-text">
|
|
<span id="topBarMessageTextCount" class="fw-bold">75</span><span class="text-neutral-600">/250 caracteres</span>
|
|
</small>
|
|
</div>
|
|
<div class="progress mt-2" style="height: 4px;">
|
|
<div id="topBarMessageTextProgress"
|
|
class="progress-bar bg-orange-primary"
|
|
role="progressbar"
|
|
style="width: 30%"
|
|
aria-valuenow="75"
|
|
aria-valuemin="0"
|
|
aria-valuemax="250"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Enlace -->
|
|
<div class="row g-4">
|
|
<div class="col-md-5">
|
|
<div class="form-group">
|
|
<label for="topBarLinkText" class="form-label text-neutral-700 fw-medium">
|
|
<i class="bi bi-link-45deg text-orange-primary me-1"></i>
|
|
Texto del enlace
|
|
</label>
|
|
<input type="text"
|
|
id="topBarLinkText"
|
|
class="form-control"
|
|
placeholder="Ej: Ver Catálogo"
|
|
maxlength="50"
|
|
value="Ver Catálogo →">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-5">
|
|
<div class="form-group">
|
|
<label for="topBarLinkUrl" class="form-label text-neutral-700 fw-medium">
|
|
<i class="bi bi-globe text-orange-primary me-1"></i>
|
|
URL del enlace
|
|
</label>
|
|
<input type="url"
|
|
id="topBarLinkUrl"
|
|
class="form-control"
|
|
placeholder="Ej: /catalogo o https://ejemplo.com"
|
|
value="/catalogo">
|
|
<small class="form-text text-neutral-700 mt-2 d-block">
|
|
URLs relativas (/page) o absolutas (https://...)
|
|
</small>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-2">
|
|
<div class="form-group">
|
|
<label for="topBarLinkTarget" class="form-label text-neutral-700 fw-medium">
|
|
<i class="bi bi-window text-orange-primary me-1"></i>
|
|
Target
|
|
</label>
|
|
<select id="topBarLinkTarget" class="form-select">
|
|
<option value="_self" selected>Misma ventana</option>
|
|
<option value="_blank">Nueva ventana</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-12">
|
|
<div class="form-group">
|
|
<div class="toggle-container">
|
|
<div class="form-check form-switch form-switch-lg">
|
|
<input class="form-check-input"
|
|
type="checkbox"
|
|
id="topBarShowLink"
|
|
role="switch"
|
|
checked>
|
|
<label class="form-check-label" for="topBarShowLink">
|
|
<strong>Mostrar enlace</strong>
|
|
<span class="text-neutral-700 ms-2">- Activa para incluir un botón de acción</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Row para segunda fila de cards -->
|
|
<div class="row">
|
|
<!-- ============================= -->
|
|
<!-- GRUPO 3: ESTILOS AVANZADOS -->
|
|
<!-- ============================= -->
|
|
<div class="col-md-6">
|
|
<div class="form-section card shadow-sm border-0 mb-4 h-100">
|
|
<div class="card-body">
|
|
<h4 class="section-title">
|
|
<span class="title-icon">
|
|
<i class="bi bi-palette"></i>
|
|
</span>
|
|
Estilos Personalizados
|
|
</h4>
|
|
|
|
<!-- Colores (4 en una fila) -->
|
|
<div class="row g-4 mb-4">
|
|
<div class="col-md-3">
|
|
<div class="form-group">
|
|
<label for="topBarBgColor" class="form-label text-neutral-700 fw-medium mb-3">
|
|
<i class="bi bi-paint-bucket text-orange-primary me-1"></i>
|
|
Color de fondo
|
|
</label>
|
|
<div class="color-picker-wrapper">
|
|
<input type="color"
|
|
id="topBarBgColor"
|
|
class="form-control form-control-color"
|
|
value="#0E2337"
|
|
title="Seleccionar color de fondo">
|
|
<div class="color-preview-text mt-2">
|
|
<code class="text-neutral-600 small">#0E2337</code>
|
|
<small class="text-neutral-700 d-block">Navy Dark (Default)</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-3">
|
|
<div class="form-group">
|
|
<label for="topBarTextColor" class="form-label text-neutral-700 fw-medium mb-3">
|
|
<i class="bi bi-fonts text-orange-primary me-1"></i>
|
|
Color de texto
|
|
</label>
|
|
<div class="color-picker-wrapper">
|
|
<input type="color"
|
|
id="topBarTextColor"
|
|
class="form-control form-control-color"
|
|
value="#ffffff"
|
|
title="Seleccionar color de texto">
|
|
<div class="color-preview-text mt-2">
|
|
<code class="text-neutral-600 small">#ffffff</code>
|
|
<small class="text-neutral-700 d-block">White (Default)</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-3">
|
|
<div class="form-group">
|
|
<label for="topBarHighlightColor" class="form-label text-neutral-700 fw-medium mb-3">
|
|
<i class="bi bi-star text-orange-primary me-1"></i>
|
|
Color destacado
|
|
</label>
|
|
<div class="color-picker-wrapper">
|
|
<input type="color"
|
|
id="topBarHighlightColor"
|
|
class="form-control form-control-color"
|
|
value="#FF8600"
|
|
title="Seleccionar color destacado">
|
|
<div class="color-preview-text mt-2">
|
|
<code class="text-neutral-600 small">#FF8600</code>
|
|
<small class="text-neutral-700 d-block">Orange Primary (Default)</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-3">
|
|
<div class="form-group">
|
|
<label for="topBarLinkHoverColor" class="form-label text-neutral-700 fw-medium mb-3">
|
|
<i class="bi bi-cursor text-orange-primary me-1"></i>
|
|
Hover enlace
|
|
</label>
|
|
<div class="color-picker-wrapper">
|
|
<input type="color"
|
|
id="topBarLinkHoverColor"
|
|
class="form-control form-control-color"
|
|
value="#FF6B35"
|
|
title="Seleccionar color hover del enlace">
|
|
<div class="color-preview-text mt-2">
|
|
<code class="text-neutral-600 small">#FF6B35</code>
|
|
<small class="text-neutral-700 d-block">Orange Hover (Default)</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tamaño de fuente -->
|
|
<div class="row g-4">
|
|
<div class="col-md-4">
|
|
<div class="form-group">
|
|
<label for="topBarFontSize" class="form-label text-neutral-700 fw-medium">
|
|
<i class="bi bi-type text-orange-primary me-1"></i>
|
|
Tamaño de fuente
|
|
</label>
|
|
<select id="topBarFontSize" class="form-select form-select-lg">
|
|
<option value="small">
|
|
Pequeño - 0.8rem (ideal para mucho texto)
|
|
</option>
|
|
<option value="normal" selected>
|
|
Normal - 0.9rem (recomendado)
|
|
</option>
|
|
<option value="large">
|
|
Grande - 1rem (máxima legibilidad)
|
|
</option>
|
|
</select>
|
|
<small class="form-text text-neutral-700 d-block mt-2">
|
|
<i class="bi bi-info-circle me-1"></i>
|
|
El tamaño afecta la altura total de la barra
|
|
</small>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-8">
|
|
<div class="alert alert-info-custom d-flex align-items-start" role="alert">
|
|
<i class="bi bi-lightbulb-fill text-orange-primary me-3 fs-4"></i>
|
|
<div>
|
|
<h6 class="alert-heading mb-1">Tip de Diseño</h6>
|
|
<p class="mb-0 small">
|
|
Para mejor legibilidad, usa <strong>fondos oscuros</strong> (Navy Dark) con <strong>texto claro</strong> (White)
|
|
y <strong>acentos naranjas</strong> para las acciones importantes.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ============================= -->
|
|
<!-- VISTA PREVIA INTERACTIVA -->
|
|
<!-- ============================= -->
|
|
<div class="col-md-6">
|
|
<div class="form-section card shadow-sm border-0 mb-4 bg-neutral-50 h-100">
|
|
<div class="card-body">
|
|
<h4 class="section-title">
|
|
<span class="title-icon">
|
|
<i class="bi bi-eye"></i>
|
|
</span>
|
|
Vista Previa en Tiempo Real
|
|
</h4>
|
|
|
|
<div class="preview-container border border-2 border-neutral-100 rounded-3 p-4 bg-white">
|
|
<!-- Top Bar Preview -->
|
|
<div id="topBarPreview" class="top-bar-preview" style="background-color: #0E2337; color: #ffffff; padding: 12px 20px; border-radius: 8px; display: flex; align-items: center; justify-content: center; gap: 15px; flex-wrap: wrap;">
|
|
<i class="bi bi-megaphone-fill" style="font-size: 1.2rem; color: #FF8600;"></i>
|
|
<span style="font-weight: 700; color: #FF8600;">Nuevo:</span>
|
|
<span style="flex: 1; min-width: 300px; text-align: center;">Accede a más de 200,000 Análisis de Precios Unitarios actualizados para 2025.</span>
|
|
<a href="#" style="color: #ffffff; text-decoration: underline; white-space: nowrap; transition: color 0.3s;">Ver Catálogo →</a>
|
|
</div>
|
|
|
|
<div class="text-center mt-4">
|
|
<small class="text-neutral-700">
|
|
<i class="bi bi-info-circle me-1"></i>
|
|
La vista previa se actualiza automáticamente al modificar los campos
|
|
</small>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-4 d-flex gap-2 justify-content-end">
|
|
<button type="button" class="btn btn-outline-secondary">
|
|
<i class="bi bi-phone me-1"></i>
|
|
Ver en Mobile
|
|
</button>
|
|
<button type="button" class="btn btn-outline-secondary">
|
|
<i class="bi bi-display me-1"></i>
|
|
Ver en Desktop
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Action Buttons -->
|
|
<div class="admin-actions mt-4">
|
|
<button type="button" id="saveSettings" class="button button-primary" disabled>
|
|
<i class="bi bi-save me-2"></i>Guardar Cambios
|
|
</button>
|
|
<span class="spinner" style="display: none; float: none; margin-left: 10px;"></span>
|
|
</div>
|
|
</div>
|