feat(admin): Aplicar diseño mejorado al componente Top Bar
Mejoras implementadas: - Header del tab con gradiente y botón de restaurar defaults - Cards con sombras y bordes sutiles para las secciones - Section titles con iconos destacados en gradiente naranja - Toggle containers con fondo gris claro y bordes - Input groups sin bordes intermedios (merge) - Color pickers mejorados con preview de código hex - Progress bar visual para contador de caracteres del mensaje - Alert personalizado con tip de diseño - Vista previa interactiva del Top Bar en tiempo real - Badges para indicadores (Opcional, Requerido) - Iconografía consistente con Bootstrap Icons - Espaciado mejorado con sistema g-4 Diseño coherente con paleta APUs (Navy + Orange + Neutrales) Issue: #144 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
FrankZamora
@@ -31,60 +31,114 @@ if (!defined('ABSPATH')) {
|
||||
<!-- Tab Content -->
|
||||
<div class="tab-content mt-3">
|
||||
<!-- ============================= -->
|
||||
<!-- TAB: TOP BAR -->
|
||||
<!-- TAB: TOP BAR - VERSIÓN MEJORADA -->
|
||||
<!-- ============================= -->
|
||||
<div id="topBarTab" class="tab-pane fade show active" role="tabpanel">
|
||||
<h3 class="mb-4">Configuración Top Bar</h3>
|
||||
<!-- 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>
|
||||
|
||||
<!-- ============================= -->
|
||||
<!-- GRUPO 1: ACTIVACIÓN -->
|
||||
<!-- ============================= -->
|
||||
<div class="form-section">
|
||||
<h4>Activación y Visibilidad</h4>
|
||||
<div class="form-section card shadow-sm border-0 mb-4">
|
||||
<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>
|
||||
|
||||
<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
|
||||
<div class="row g-4">
|
||||
<!-- Enabled -->
|
||||
<div class="col-md-4">
|
||||
<div class="form-group">
|
||||
<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">
|
||||
<span class="switch-label-on">Activado</span>
|
||||
<span class="switch-label-off">Desactivado</span>
|
||||
</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>
|
||||
</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
|
||||
<!-- Show on Mobile -->
|
||||
<div class="col-md-4">
|
||||
<div class="form-group">
|
||||
<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>
|
||||
</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
|
||||
<!-- Show on Desktop -->
|
||||
<div class="col-md-4">
|
||||
<div class="form-group">
|
||||
<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>
|
||||
@@ -94,136 +148,188 @@ if (!defined('ABSPATH')) {
|
||||
<!-- ============================= -->
|
||||
<!-- GRUPO 2: CONTENIDO -->
|
||||
<!-- ============================= -->
|
||||
<div class="form-section">
|
||||
<h4>Contenido y Mensajes</h4>
|
||||
<div class="form-section card shadow-sm border-0 mb-4">
|
||||
<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">
|
||||
<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
|
||||
<!-- 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>
|
||||
</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
|
||||
<!-- 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>
|
||||
@@ -233,92 +339,180 @@ if (!defined('ABSPATH')) {
|
||||
<!-- ============================= -->
|
||||
<!-- GRUPO 3: ESTILOS AVANZADOS -->
|
||||
<!-- ============================= -->
|
||||
<div class="form-section">
|
||||
<h4>Estilos Personalizados</h4>
|
||||
<div class="form-section card shadow-sm border-0 mb-4">
|
||||
<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">
|
||||
<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>
|
||||
<!-- 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>
|
||||
|
||||
<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>
|
||||
<!-- 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>
|
||||
|
||||
<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 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 (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>
|
||||
<!-- ============================= -->
|
||||
<!-- VISTA PREVIA INTERACTIVA -->
|
||||
<!-- ============================= -->
|
||||
<div class="form-section card shadow-sm border-0 mb-4 bg-neutral-50">
|
||||
<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>
|
||||
|
||||
Reference in New Issue
Block a user