cc072e407a
- Actualizar main.php con diseño completo del Tab Top Bar - Agregar switches en lugar de checkboxes básicos - Implementar layout responsive con grid Bootstrap - Agregar textarea con contador de caracteres para mensaje - Implementar color pickers para estilos personalizados - Mejorar accesibilidad con labels y roles ARIA - Agregar vista previa informativa Basado en: 05-IMPLEMENTACION-ADMIN-INTERFAZ-TOP-BAR.md Issue: #144 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
334 lines
9.9 KiB
PHP
334 lines
9.9 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 -->
|
|
<!-- ============================= -->
|
|
<div id="topBarTab" class="tab-pane fade show active" role="tabpanel">
|
|
<h3 class="mb-4">Configuración Top Bar</h3>
|
|
|
|
<!-- ============================= -->
|
|
<!-- GRUPO 1: ACTIVACIÓN -->
|
|
<!-- ============================= -->
|
|
<div class="form-section">
|
|
<h4>Activación y Visibilidad</h4>
|
|
|
|
<div class="row">
|
|
<!-- Enabled + Show on Mobile + Show on Desktop -->
|
|
<div class="col-md-4">
|
|
<div class="form-group">
|
|
<label class="text-secondary fw-medium d-block mb-2">Estado del Componente</label>
|
|
<div class="form-check form-switch">
|
|
<input class="form-check-input"
|
|
type="checkbox"
|
|
id="topBarEnabled"
|
|
role="switch">
|
|
<label class="form-check-label" for="topBarEnabled">
|
|
Activar Top Bar
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-4">
|
|
<div class="form-group">
|
|
<label class="text-secondary fw-medium d-block mb-2">Visibilidad Mobile</label>
|
|
<div class="form-check form-switch">
|
|
<input class="form-check-input"
|
|
type="checkbox"
|
|
id="topBarShowOnMobile"
|
|
role="switch">
|
|
<label class="form-check-label" for="topBarShowOnMobile">
|
|
Mostrar en dispositivos móviles
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-4">
|
|
<div class="form-group">
|
|
<label class="text-secondary fw-medium d-block mb-2">Visibilidad Desktop</label>
|
|
<div class="form-check form-switch">
|
|
<input class="form-check-input"
|
|
type="checkbox"
|
|
id="topBarShowOnDesktop"
|
|
role="switch">
|
|
<label class="form-check-label" for="topBarShowOnDesktop">
|
|
Mostrar en desktop
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ============================= -->
|
|
<!-- GRUPO 2: CONTENIDO -->
|
|
<!-- ============================= -->
|
|
<div class="form-section">
|
|
<h4>Contenido y Mensajes</h4>
|
|
|
|
<!-- Icono -->
|
|
<div class="row">
|
|
<div class="col-md-8">
|
|
<div class="form-group">
|
|
<label for="topBarIconClass" class="text-secondary fw-medium">
|
|
Clase del icono
|
|
<small class="text-muted">(Bootstrap Icons)</small>
|
|
</label>
|
|
<input type="text"
|
|
id="topBarIconClass"
|
|
class="form-control"
|
|
placeholder="Ej: bi bi-megaphone-fill"
|
|
maxlength="50">
|
|
<small class="form-text text-muted">
|
|
Ver iconos disponibles: <a href="https://icons.getbootstrap.com/" target="_blank">Bootstrap Icons</a>
|
|
</small>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-4">
|
|
<div class="form-group">
|
|
<label class="text-secondary fw-medium d-block mb-2">Opciones de Icono</label>
|
|
<div class="form-check form-switch">
|
|
<input class="form-check-input"
|
|
type="checkbox"
|
|
id="topBarShowIcon"
|
|
role="switch">
|
|
<label class="form-check-label" for="topBarShowIcon">
|
|
Mostrar icono
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Texto destacado -->
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<div class="form-group">
|
|
<label for="topBarHighlightText" class="text-secondary fw-medium">
|
|
Texto destacado
|
|
<small class="text-muted">(opcional)</small>
|
|
</label>
|
|
<input type="text"
|
|
id="topBarHighlightText"
|
|
class="form-control"
|
|
placeholder='Ej: "Nuevo:" o "Promoción:"'
|
|
maxlength="30">
|
|
<small class="form-text text-muted">
|
|
Se muestra en negritas y con color destacado. Dejar vacío para omitir.
|
|
</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Mensaje principal -->
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<div class="form-group">
|
|
<label for="topBarMessageText" class="text-secondary fw-medium">
|
|
Mensaje principal <span class="text-danger">*</span>
|
|
</label>
|
|
<textarea id="topBarMessageText"
|
|
class="form-control"
|
|
rows="3"
|
|
maxlength="250"
|
|
placeholder="Ej: Accede a más de 200,000 Análisis de Precios Unitarios actualizados para 2025."
|
|
required></textarea>
|
|
<small class="form-text text-muted">
|
|
<span id="topBarMessageTextCount">0</span>/250 caracteres
|
|
</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Enlace -->
|
|
<div class="row">
|
|
<div class="col-md-5">
|
|
<div class="form-group">
|
|
<label for="topBarLinkText" class="text-secondary fw-medium">
|
|
Texto del enlace
|
|
</label>
|
|
<input type="text"
|
|
id="topBarLinkText"
|
|
class="form-control"
|
|
placeholder="Ej: Ver Catálogo"
|
|
maxlength="50">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-5">
|
|
<div class="form-group">
|
|
<label for="topBarLinkUrl" class="text-secondary fw-medium">
|
|
URL del enlace
|
|
</label>
|
|
<input type="url"
|
|
id="topBarLinkUrl"
|
|
class="form-control"
|
|
placeholder="Ej: /catalogo o https://ejemplo.com">
|
|
<small class="form-text text-muted">URLs relativas o absolutas</small>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-2">
|
|
<div class="form-group">
|
|
<label for="topBarLinkTarget" class="text-secondary fw-medium">
|
|
Target
|
|
</label>
|
|
<select id="topBarLinkTarget" class="form-select">
|
|
<option value="_self">Misma ventana</option>
|
|
<option value="_blank">Nueva ventana</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<div class="form-group">
|
|
<div class="form-check form-switch">
|
|
<input class="form-check-input"
|
|
type="checkbox"
|
|
id="topBarShowLink"
|
|
role="switch">
|
|
<label class="form-check-label" for="topBarShowLink">
|
|
Mostrar enlace
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ============================= -->
|
|
<!-- GRUPO 3: ESTILOS AVANZADOS -->
|
|
<!-- ============================= -->
|
|
<div class="form-section">
|
|
<h4>Estilos Personalizados</h4>
|
|
|
|
<!-- Colores (4 en una fila) -->
|
|
<div class="row">
|
|
<div class="col-md-3">
|
|
<div class="form-group">
|
|
<label for="topBarBgColor" class="text-secondary fw-medium">
|
|
Color de fondo
|
|
</label>
|
|
<input type="color"
|
|
id="topBarBgColor"
|
|
class="form-control form-control-color"
|
|
value="#0E2337"
|
|
title="Seleccionar color de fondo">
|
|
<small class="form-text text-muted">Default: #0E2337</small>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-3">
|
|
<div class="form-group">
|
|
<label for="topBarTextColor" class="text-secondary fw-medium">
|
|
Color de texto
|
|
</label>
|
|
<input type="color"
|
|
id="topBarTextColor"
|
|
class="form-control form-control-color"
|
|
value="#ffffff"
|
|
title="Seleccionar color de texto">
|
|
<small class="form-text text-muted">Default: #ffffff</small>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-3">
|
|
<div class="form-group">
|
|
<label for="topBarHighlightColor" class="text-secondary fw-medium">
|
|
Color destacado
|
|
</label>
|
|
<input type="color"
|
|
id="topBarHighlightColor"
|
|
class="form-control form-control-color"
|
|
value="#FF8600"
|
|
title="Seleccionar color destacado">
|
|
<small class="form-text text-muted">Default: #FF8600</small>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-3">
|
|
<div class="form-group">
|
|
<label for="topBarLinkHoverColor" class="text-secondary fw-medium">
|
|
Color hover enlace
|
|
</label>
|
|
<input type="color"
|
|
id="topBarLinkHoverColor"
|
|
class="form-control form-control-color"
|
|
value="#FF8600"
|
|
title="Seleccionar color hover del enlace">
|
|
<small class="form-text text-muted">Default: #FF8600</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tamaño de fuente -->
|
|
<div class="row">
|
|
<div class="col-md-4">
|
|
<div class="form-group">
|
|
<label for="topBarFontSize" class="text-secondary fw-medium">
|
|
Tamaño de fuente
|
|
</label>
|
|
<select id="topBarFontSize" class="form-select">
|
|
<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>
|
|
|
|
<!-- Vista previa (opcional para futuras versiones) -->
|
|
<div class="form-section bg-light">
|
|
<h4>Vista Previa</h4>
|
|
<p class="text-muted">
|
|
<i class="bi bi-info-circle me-1"></i>
|
|
Guarda los cambios para ver el Top Bar actualizado en el frontend.
|
|
</p>
|
|
</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>
|