roi-theme/admin-panel/admin/pages/main.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="#topBar" href="#topBar">Top Bar</a>
		</li>
		<!-- Más tabs aquí: Navbar, Hero, Footer, etc. -->
	</ul>

	<!-- Tab Content -->
	<div class="tab-content mt-3">
		<!-- Top Bar Tab -->
		<div id="topBar" class="tab-pane fade show active">
			<h3>Configuración Top Bar</h3>
			<p class="text-muted">Personaliza la barra de notificación superior del sitio.</p>

			<!-- Activación y Visibilidad -->
			<div class="form-section mb-4">
				<h4>Activación y Visibilidad</h4>
				<div class="form-group mb-3">
					<label class="form-check-label">
						<input type="checkbox" id="topBarEnabled" class="form-check-input">
						Activar Top Bar
					</label>
					<p class="form-text text-muted">Si está desactivado, el Top Bar no se mostrará en el sitio.</p>
				</div>
				<div class="row">
					<div class="col-md-6">
						<div class="form-group mb-3">
							<label class="form-check-label">
								<input type="checkbox" id="topBarShowOnMobile" class="form-check-input">
								Mostrar en móvil
							</label>
						</div>
					</div>
					<div class="col-md-6">
						<div class="form-group mb-3">
							<label class="form-check-label">
								<input type="checkbox" id="topBarShowOnDesktop" class="form-check-input">
								Mostrar en desktop
							</label>
						</div>
					</div>
				</div>
			</div>

			<!-- Contenido -->
			<div class="form-section mb-4">
				<h4>Contenido</h4>

				<div class="row">
					<div class="col-md-6">
						<div class="form-group mb-3">
							<label for="topBarIconClass">Clase del icono</label>
							<input type="text" id="topBarIconClass" class="form-control" placeholder="bi bi-megaphone-fill">
							<p class="form-text text-muted">Usa clases de <a href="https://icons.getbootstrap.com/" target="_blank">Bootstrap Icons</a></p>
						</div>
					</div>
					<div class="col-md-6">
						<div class="form-group mb-3">
							<label class="form-check-label">
								<input type="checkbox" id="topBarShowIcon" class="form-check-input">
								Mostrar icono
							</label>
						</div>
					</div>
				</div>

				<div class="form-group mb-3">
					<label for="topBarHighlightText">Texto destacado</label>
					<input type="text" id="topBarHighlightText" class="form-control" placeholder="Nuevo:" maxlength="30">
					<p class="form-text text-muted">Máximo 30 caracteres. Aparece en negritas.</p>
				</div>

				<div class="form-group mb-3">
					<label for="topBarMessageText">Mensaje principal *</label>
					<input type="text" id="topBarMessageText" class="form-control" placeholder="Accede a más de 200,000 APUs..." maxlength="250" required>
					<p class="form-text text-muted">Máximo 250 caracteres. Campo obligatorio.</p>
				</div>

				<div class="row">
					<div class="col-md-5">
						<div class="form-group mb-3">
							<label for="topBarLinkText">Texto del enlace</label>
							<input type="text" id="topBarLinkText" class="form-control" placeholder="Ver Catálogo" maxlength="50">
						</div>
					</div>
					<div class="col-md-5">
						<div class="form-group mb-3">
							<label for="topBarLinkUrl">URL del enlace</label>
							<input type="url" id="topBarLinkUrl" class="form-control" placeholder="/catalogo">
						</div>
					</div>
					<div class="col-md-2">
						<div class="form-group mb-3">
							<label for="topBarLinkTarget">Target</label>
							<select id="topBarLinkTarget" class="form-select">
								<option value="_self">Misma pestaña</option>
								<option value="_blank">Nueva pestaña</option>
							</select>
						</div>
					</div>
				</div>
				<div class="form-group mb-3">
					<label class="form-check-label">
						<input type="checkbox" id="topBarShowLink" class="form-check-input">
						Mostrar enlace
					</label>
				</div>
			</div>

			<!-- Estilos Personalizados -->
			<div class="form-section">
				<h4>Estilos Personalizados</h4>
				<p class="form-text text-muted mb-3">Deja en blanco para usar los colores del tema por defecto.</p>

				<div class="row">
					<div class="col-md-3">
						<div class="form-group mb-3">
							<label for="topBarBgColor">Color de fondo</label>
							<input type="color" id="topBarBgColor" class="form-control form-control-color">
						</div>
					</div>
					<div class="col-md-3">
						<div class="form-group mb-3">
							<label for="topBarTextColor">Color de texto</label>
							<input type="color" id="topBarTextColor" class="form-control form-control-color">
						</div>
					</div>
					<div class="col-md-3">
						<div class="form-group mb-3">
							<label for="topBarHighlightColor">Color del highlight</label>
							<input type="color" id="topBarHighlightColor" class="form-control form-control-color">
						</div>
					</div>
					<div class="col-md-3">
						<div class="form-group mb-3">
							<label for="topBarLinkHoverColor">Color hover enlace</label>
							<input type="color" id="topBarLinkHoverColor" class="form-control form-control-color">
						</div>
					</div>
				</div>

				<div class="form-group mb-3">
					<label for="topBarFontSize">Tamaño de fuente</label>
					<select id="topBarFontSize" class="form-select" style="max-width: 200px;">
						<option value="small">Pequeña</option>
						<option value="normal" selected>Normal</option>
						<option value="large">Grande</option>
					</select>
				</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>