Files
admin-edu-space/frontend/views/layouts/base.html
T

173 lines
6.7 KiB
HTML

<!DOCTYPE html>
<html lang="es" data-bs-theme="dark">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{% block title %}Edu-Space Admin{% endblock %}</title>
<!-- Favicon -->
<link rel="icon" type="image/png" href="/img/favicon.png">
<!-- Google Fonts: Inter -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<!-- Bootstrap 5 & Icons -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css" rel="stylesheet">
<!-- Design System Theme -->
<link href="/css/theme.css" rel="stylesheet">
<link href="/css/style.css" rel="stylesheet">
<style>
body {
font-family: 'Inter', sans-serif;
min-height: 100vh;
margin: 0;
display: flex;
flex-direction: column;
transition: background-color 0.25s ease, color 0.25s ease;
}
/* --- MODO CLARO ([data-bs-theme="light"]) --- */
[data-bs-theme="light"] body {
background: #F8FAFC !important;
color: #1E293B !important;
}
[data-bs-theme="light"] .glass-navbar {
background: rgba(255, 255, 255, 0.88) !important;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04) !important;
}
[data-bs-theme="light"] .glass-navbar .nav-link {
color: #334155 !important;
}
[data-bs-theme="light"] .glass-navbar .nav-link:hover,
[data-bs-theme="light"] .glass-navbar .nav-link.active {
color: #B43E8E !important;
}
[data-bs-theme="light"] .glass-card,
[data-bs-theme="light"] .card {
background: #FFFFFF !important;
color: #1E293B !important;
border: 1px solid rgba(0, 0, 0, 0.08) !important;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
}
/* --- MODO OSCURO ([data-bs-theme="dark"]) --- */
[data-bs-theme="dark"] body {
background: linear-gradient(135deg, #0F172A 0%, #1E1B4B 100%) !important;
color: #F8FAFC !important;
}
[data-bs-theme="dark"] .glass-navbar {
background: rgba(15, 23, 42, 0.78) !important;
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3) !important;
}
[data-bs-theme="dark"] .glass-navbar .nav-link {
color: #CBD5E1 !important;
}
[data-bs-theme="dark"] .glass-navbar .nav-link:hover,
[data-bs-theme="dark"] .glass-navbar .nav-link.active {
color: #FF8AB6 !important;
}
[data-bs-theme="dark"] .glass-card,
[data-bs-theme="dark"] .card {
background: rgba(30, 41, 59, 0.7) !important;
color: #F8FAFC !important;
border: 1px solid rgba(255, 255, 255, 0.08) !important;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
}
.navbar-brand span {
font-weight: 700;
background: linear-gradient(90deg, #B43E8E, #682CAD);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.main-container {
flex: 1;
padding: 2rem 0;
}
.fade-in-up {
animation: fadeInUp 0.6s ease-out forwards;
opacity: 0;
transform: translateY(20px);
}
@keyframes fadeInUp {
to {
opacity: 1;
transform: translateY(0);
}
}
</style>
{% block extra_css %}{% endblock %}
</head>
<body>
<!-- Navbar -->
<nav class="navbar navbar-expand-lg glass-navbar sticky-top">
<div class="container-fluid px-4">
<a class="navbar-brand d-flex align-items-center" href="/dashboard">
<img src="/img/logo_unicaba_mini.png" alt="Logo UniCABA" class="navbar-logo me-2" height="30">
<span>Edu-Space Admin</span>
</a>
<button class="navbar-toggler border-0" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
<i class="bi bi-list text-light fs-2"></i>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav me-auto align-items-center ms-3">
<li class="nav-item">
<a class="nav-link px-3" href="/dashboard">
<i class="bi bi-speedometer2 me-1"></i>Panel General
</a>
</li>
<li class="nav-item">
<a class="nav-link px-3" href="/classrooms/list_classrooms">
<i class="bi bi-door-open me-1"></i>Espacios & Sedes
</a>
</li>
<li class="nav-item">
<a class="nav-link px-3" href="/schedule/calendar_view">
<i class="bi bi-calendar3 me-1"></i>Cronograma & Reservas
</a>
</li>
<li class="nav-item">
<a class="nav-link px-3 active text-primary fw-semibold" href="/predictive">
<i class="bi bi-cpu me-1"></i>Módulo Predictivo
</a>
</li>
</ul>
<ul class="navbar-nav ms-auto align-items-center">
<li class="nav-item">
<a class="btn btn-outline-danger btn-sm rounded-pill px-3 fw-medium" href="/auth/logout">
<i class="bi bi-box-arrow-right me-1"></i> Cerrar Sesión
</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Main Content -->
<main class="container main-container">
{% block content %}{% endblock %}
</main>
<!-- Scripts base -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
{% block extra_js %}{% endblock %}
</body>
</html>