0846a3bf03
- Reorganización de estructura: Admin/, Public/, Shared/, Schemas/ - 12 componentes migrados: TopNotificationBar, Navbar, CtaLetsTalk, Hero, FeaturedImage, TableOfContents, CtaBoxSidebar, SocialShare, CtaPost, RelatedPost, ContactForm, Footer - Panel de administración con tabs Bootstrap 5 funcionales - Schemas JSON para configuración de componentes - Renderers dinámicos con CSSGeneratorService (cero CSS hardcodeado) - FormBuilders para UI admin con Design System consistente - Fix: Bootstrap JS cargado en header para tabs funcionales - Fix: buildTextInput maneja valores mixed (bool/string) - Eliminación de estructura legacy (src/, admin/, assets/css/componente-*) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
284 lines
16 KiB
HTML
284 lines
16 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="es">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>TopBar - Preview de Diseño</title>
|
|
|
|
<!-- Bootstrap 5 -->
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<!-- Bootstrap Icons -->
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
|
|
<!-- Google Fonts -->
|
|
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">
|
|
|
|
<style>
|
|
body {
|
|
font-family: 'Poppins', sans-serif;
|
|
background-color: #f0f0f1;
|
|
padding: 20px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<!-- ============================================================
|
|
TAB: TOP NOTIFICATION BAR CONFIGURATION
|
|
============================================================ -->
|
|
<div class="tab-pane fade show active" id="topBarTab" role="tabpanel">
|
|
|
|
<!-- ========================================
|
|
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-megaphone-fill me-2" style="color: #FF8600;"></i>
|
|
Configuración de TopBar
|
|
</h3>
|
|
<p class="mb-0 small" style="opacity: 0.85;">
|
|
Personaliza la barra de notificación superior del 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>
|
|
|
|
<!-- ========================================
|
|
PATRÓN 2: LAYOUT 2 COLUMNAS
|
|
======================================== -->
|
|
<div class="row g-3">
|
|
<div class="col-lg-6">
|
|
<!-- ========================================
|
|
GRUPO 1: ACTIVACIÓN Y VISIBILIDAD (OBLIGATORIO)
|
|
PATRÓN 3: CARD CON BORDER-LEFT NAVY
|
|
======================================== -->
|
|
<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>
|
|
|
|
<!-- ⚠️ PATRÓN 4: SWITCHES VERTICALES CON ICONOS (3 OBLIGATORIOS) -->
|
|
|
|
<!-- Switch 1: Enabled (OBLIGATORIO) -->
|
|
<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 TopBar</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="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>
|
|
|
|
<!-- Switch 3: Show on Desktop (OBLIGATORIO) -->
|
|
<div class="mb-2">
|
|
<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>
|
|
|
|
<!-- Campo adicional del schema: show_on_pages (select) -->
|
|
<div class="mb-0 mt-3">
|
|
<label for="topBarShowOnPages" class="form-label small mb-1 fw-semibold" style="color: #495057;">
|
|
<i class="bi bi-file-earmark-text me-1" style="color: #FF8600;"></i>
|
|
Mostrar en
|
|
</label>
|
|
<select id="topBarShowOnPages" class="form-select form-select-sm">
|
|
<option value="all" selected>Todas las páginas</option>
|
|
<option value="home">Solo página de inicio</option>
|
|
<option value="posts">Solo posts individuales</option>
|
|
<option value="pages">Solo páginas</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ========================================
|
|
GRUPO 2: 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-chat-text me-2" style="color: #FF8600;"></i>
|
|
Contenido
|
|
</h5>
|
|
|
|
<!-- icon_class + label_text (compactados) -->
|
|
<div class="row g-2 mb-2">
|
|
<div class="col-6">
|
|
<label for="topBarIconClass" class="form-label small mb-1 fw-semibold" style="color: #495057;">
|
|
<i class="bi bi-star-fill me-1" style="color: #FF8600;"></i>
|
|
Clase del ícono
|
|
</label>
|
|
<input type="text" id="topBarIconClass" class="form-control form-control-sm" value="bi-megaphone-fill" placeholder="bi-...">
|
|
</div>
|
|
<div class="col-6">
|
|
<label for="topBarLabelText" class="form-label small mb-1 fw-semibold" style="color: #495057;">
|
|
<i class="bi bi-tag me-1" style="color: #FF8600;"></i>
|
|
Etiqueta
|
|
</label>
|
|
<input type="text" id="topBarLabelText" class="form-control form-control-sm" value="Nuevo:" maxlength="30">
|
|
</div>
|
|
</div>
|
|
|
|
<!-- message_text (textarea full width) -->
|
|
<div class="mb-2">
|
|
<label for="topBarMessageText" class="form-label small mb-1 fw-semibold" style="color: #495057;">
|
|
<i class="bi bi-chat-dots me-1" style="color: #FF8600;"></i>
|
|
Mensaje
|
|
</label>
|
|
<textarea id="topBarMessageText" class="form-control form-control-sm" rows="3" maxlength="200">Accede a más de 200,000 Análisis de Precios Unitarios actualizados para 2025.</textarea>
|
|
<small class="text-muted">Máximo 200 caracteres</small>
|
|
</div>
|
|
|
|
<!-- link_text + link_url (compactados) -->
|
|
<div class="row g-2 mb-0">
|
|
<div class="col-6">
|
|
<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 del enlace
|
|
</label>
|
|
<input type="text" id="topBarLinkText" class="form-control form-control-sm" value="Ver Catálogo" maxlength="50">
|
|
</div>
|
|
<div class="col-6">
|
|
<label for="topBarLinkUrl" class="form-label small mb-1 fw-semibold" style="color: #495057;">
|
|
<i class="bi bi-box-arrow-up-right me-1" style="color: #FF8600;"></i>
|
|
URL
|
|
</label>
|
|
<input type="url" id="topBarLinkUrl" class="form-control form-control-sm" value="#" placeholder="https://...">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="col-lg-6">
|
|
<!-- ========================================
|
|
GRUPO 3: ESTILOS - COLORES
|
|
======================================== -->
|
|
<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 - Colores
|
|
</h5>
|
|
|
|
<!-- PATRÓN 5: COLOR PICKERS EN GRID 2X2 -->
|
|
<div class="row g-2 mb-2">
|
|
<div class="col-6">
|
|
<label for="topBarBackgroundColor" 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="topBarBackgroundColor" class="form-control form-control-color w-100" value="#0E2337" title="Color de fondo">
|
|
<small class="text-muted d-block mt-1" id="topBarBackgroundColorValue">#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="Color de texto">
|
|
<small class="text-muted d-block mt-1" id="topBarTextColorValue">#FFFFFF</small>
|
|
</div>
|
|
<div class="col-6">
|
|
<label for="topBarLabelColor" class="form-label small mb-1 fw-semibold" style="color: #495057;">
|
|
<i class="bi bi-tag-fill me-1" style="color: #FF8600;"></i>
|
|
Color etiqueta
|
|
</label>
|
|
<input type="color" id="topBarLabelColor" class="form-control form-control-color w-100" value="#FF8600" title="Color etiqueta">
|
|
<small class="text-muted d-block mt-1" id="topBarLabelColorValue">#FF8600</small>
|
|
</div>
|
|
<div class="col-6">
|
|
<label for="topBarIconColor" class="form-label small mb-1 fw-semibold" style="color: #495057;">
|
|
<i class="bi bi-star me-1" style="color: #FF8600;"></i>
|
|
Color ícono
|
|
</label>
|
|
<input type="color" id="topBarIconColor" class="form-control form-control-color w-100" value="#FF8600" title="Color ícono">
|
|
<small class="text-muted d-block mt-1" id="topBarIconColorValue">#FF8600</small>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row g-2 mb-0">
|
|
<div class="col-6">
|
|
<label for="topBarLinkColor" class="form-label small mb-1 fw-semibold" style="color: #495057;">
|
|
<i class="bi bi-link me-1" style="color: #FF8600;"></i>
|
|
Color enlace
|
|
</label>
|
|
<input type="color" id="topBarLinkColor" class="form-control form-control-color w-100" value="#FFFFFF" title="Color enlace">
|
|
<small class="text-muted d-block mt-1" id="topBarLinkColorValue">#FFFFFF</small>
|
|
</div>
|
|
<div class="col-6">
|
|
<label for="topBarLinkHoverColor" class="form-label small mb-1 fw-semibold" style="color: #495057;">
|
|
<i class="bi bi-hand-index me-1" style="color: #FF8600;"></i>
|
|
Color enlace (hover)
|
|
</label>
|
|
<input type="color" id="topBarLinkHoverColor" class="form-control form-control-color w-100" value="#FF8600" title="Color enlace hover">
|
|
<small class="text-muted d-block mt-1" id="topBarLinkHoverColorValue">#FF8600</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ========================================
|
|
GRUPO 4: ESTILOS - TAMAÑOS
|
|
======================================== -->
|
|
<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>
|
|
Estilos - Tamaños
|
|
</h5>
|
|
|
|
<div class="row g-2 mb-0">
|
|
<div class="col-6">
|
|
<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>
|
|
<input type="text" id="topBarFontSize" class="form-control form-control-sm" value="0.9rem">
|
|
<small class="text-muted">Ej: 0.9rem, 14px</small>
|
|
</div>
|
|
<div class="col-6">
|
|
<label for="topBarPadding" class="form-label small mb-1 fw-semibold" style="color: #495057;">
|
|
<i class="bi bi-bounding-box me-1" style="color: #FF8600;"></i>
|
|
Padding vertical
|
|
</label>
|
|
<input type="text" id="topBarPadding" class="form-control form-control-sm" value="0.5rem 0">
|
|
<small class="text-muted">Ej: 0.5rem 0</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div><!-- /tab-pane -->
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
|
|
</body>
|
|
</html>
|