Spaces:
Running
Running
| --- | |
| // Barra lateral colapsable con la navegación principal y el estado de sesión. | |
| --- | |
| <!-- SECCIÓN 1: SIDEBAR COLAPSABLE --> | |
| <aside | |
| id="sidebar" | |
| class="flex-shrink-0 bg-stone-900 text-stone-200 flex flex-col z-30 border-r border-stone-800 h-full" | |
| > | |
| <div class="p-4 border-b border-stone-800 flex items-center justify-between"> | |
| <div class="flex items-center gap-2 overflow-hidden"> | |
| <i class="fa-solid fa-seedling text-emerald-500 text-2xl shrink-0"></i> | |
| <div class="sidebar-text"> | |
| <h1 class="text-lg font-bold text-emerald-500 tracking-wide">AgroVisión</h1> | |
| </div> | |
| </div> | |
| <button | |
| id="btn-sidebar-toggle" | |
| class="text-stone-500 hover:text-white p-1" | |
| title="Alternar Sidebar" | |
| > | |
| <i class="fa-solid fa-bars" id="toggle-icon"></i> | |
| </button> | |
| </div> | |
| <nav class="flex-1 p-4 space-y-2 overflow-y-auto" id="main-nav"> | |
| <button data-tab="tab-resumen" class="nav-btn nav-btn-active w-full flex items-center gap-3 px-4 py-3 rounded-lg text-sm font-semibold text-stone-400 hover:bg-stone-800 hover:text-white transition-all"> | |
| <i class="fa-solid fa-house w-5 text-center"></i> | |
| <span class="sidebar-text">Resumen</span> | |
| </button> | |
| <button data-tab="tab-satelite" class="nav-btn w-full flex items-center gap-3 px-4 py-3 rounded-lg text-sm font-semibold text-stone-400 hover:bg-stone-800 hover:text-white transition-all"> | |
| <i class="fa-solid fa-satellite-dish w-5 text-center"></i> | |
| <span class="sidebar-text">Teledetección</span> | |
| </button> | |
| <button data-tab="tab-weather" class="nav-btn w-full flex items-center gap-3 px-4 py-3 rounded-lg text-sm font-semibold text-stone-400 hover:bg-stone-800 hover:text-white transition-all"> | |
| <i class="fa-solid fa-cloud w-5 text-center"></i> | |
| <span class="sidebar-text">Meteorología</span> | |
| </button> | |
| <button data-tab="tab-analysis" class="nav-btn w-full flex items-center gap-3 px-4 py-3 rounded-lg text-sm font-semibold text-stone-400 hover:bg-stone-800 hover:text-white transition-all"> | |
| <i class="fa-solid fa-chart-line w-5 text-center"></i> | |
| <span class="sidebar-text">Análisis Cruzado</span> | |
| </button> | |
| <button data-tab="tab-vision" class="nav-btn w-full flex items-center justify-between gap-3 px-4 py-3 rounded-lg text-sm font-semibold text-stone-400 hover:bg-stone-800 hover:text-white transition-all"> | |
| <span class="flex items-center gap-3"><i class="fa-solid fa-helicopter w-5 text-center"></i><span class="sidebar-text">Conteo</span></span> | |
| <span class="bg-amber-500/10 text-amber-400 text-[8px] font-bold px-1.5 py-0.5 rounded border border-amber-500/20 uppercase sidebar-text shrink-0">Standby</span> | |
| </button> | |
| </nav> | |
| <!-- Footer plegable --> | |
| <div class="border-t border-stone-800 bg-stone-950/50 relative"> | |
| <button id="btn-footer" class="w-full flex items-center justify-between px-4 py-2 text-[10px] text-stone-500 uppercase tracking-widest"> | |
| <span>Estado de sesión</span><i id="footer-chevron" class="fa-solid fa-chevron-up"></i> | |
| </button> | |
| <div id="footer-body" class="p-4 pt-0"> | |
| <div id="btn-profile-menu" class="flex items-center gap-3 cursor-pointer hover:bg-stone-800/50 p-1.5 rounded-lg transition-all"> | |
| <div class="w-8 h-8 rounded-full bg-emerald-700 flex items-center justify-center text-xs font-bold text-white shrink-0" id="avatar-circle">AG</div> | |
| <div class="truncate"> | |
| <h5 class="text-xs font-semibold text-stone-200" id="user-display-name">Agrónomo</h5> | |
| <p class="text-[9px] text-stone-500" id="user-session-mode">Sesión efímera (BYOK)</p> | |
| </div> | |
| <i class="fa-solid fa-ellipsis-vertical text-stone-500 ml-auto"></i> | |
| </div> | |
| <!-- Menu Dropdown de Perfil --> | |
| <div id="profile-dropdown" class="hidden absolute bottom-full left-4 right-4 mb-2 bg-stone-900 border border-stone-800 rounded-xl shadow-xl z-50 p-2 space-y-1"> | |
| <button data-action="tab-settings" class="dropdown-btn w-full text-left flex items-center gap-2.5 px-3 py-2 rounded-lg text-xs font-semibold text-stone-300 hover:bg-stone-800 hover:text-white transition-all"> | |
| <i class="fa-solid fa-user-gear text-stone-500 w-4"></i> Ajustes de Perfil | |
| </button> | |
| <button data-action="tab-config" class="dropdown-btn w-full text-left flex items-center gap-2.5 px-3 py-2 rounded-lg text-xs font-semibold text-stone-300 hover:bg-stone-800 hover:text-white transition-all"> | |
| <i class="fa-solid fa-sliders text-stone-500 w-4"></i> Credenciales & APIs | |
| </button> | |
| <button data-action="tab-data" class="dropdown-btn w-full text-left flex items-center gap-2.5 px-3 py-2 rounded-lg text-xs font-semibold text-stone-300 hover:bg-stone-800 hover:text-white transition-all"> | |
| <i class="fa-solid fa-database text-stone-500 w-4"></i> Explorador de Datos | |
| </button> | |
| <button id="dropdown-telemetry" class="w-full text-left flex items-center gap-2.5 px-3 py-2 rounded-lg text-xs font-semibold text-stone-300 hover:bg-stone-800 hover:text-white transition-all"> | |
| <i class="fa-solid fa-chart-line text-stone-500 w-4"></i> Telemetría de UI | |
| </button> | |
| <hr class="border-stone-800 my-1" /> | |
| <button id="dropdown-logout" class="w-full text-left flex items-center gap-2.5 px-3 py-2 rounded-lg text-xs font-semibold text-red-400 hover:bg-red-950/20 hover:text-red-300 transition-all"> | |
| <i class="fa-solid fa-right-from-bracket w-4"></i> Cerrar Sesión | |
| </button> | |
| </div> | |
| <div class="mt-3 flex items-center gap-2 text-[10px]" id="db-status"> | |
| <span class="relative flex h-2 w-2"> | |
| <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-stone-500 opacity-75"></span> | |
| <span class="relative inline-flex rounded-full h-2 w-2 bg-stone-500"></span> | |
| </span> | |
| <span id="db-status-text" class="text-stone-400">Conectando al backend…</span> | |
| <button id="btn-telemetry" class="ml-auto text-stone-500 hover:text-emerald-400 transition-colors" title="Ver telemetría"> | |
| <i class="fa-solid fa-chart-line text-[10px]"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </aside> | |