2025-02-19 14:27:14 -03:00
<!DOCTYPE html>
2025-04-03 10:30:48 -03:00
< html lang = "pt-BR" >
2025-02-19 14:27:14 -03:00
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
2025-04-02 14:34:05 -03:00
< title > {% block title %}{% endblock %} - Controles OCI< / title >
2025-04-03 13:48:09 -03:00
<!-- Bootstrap 5 CSS -->
< link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css?v=1" rel = "stylesheet" >
<!-- Font Awesome 6 -->
< link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css?v=1" >
2025-04-03 15:31:02 -03:00
<!-- Componentes CSS -->
< link rel = "stylesheet" href = "{{ url_for('static', filename='css/components.css') }}" >
2025-04-03 13:48:09 -03:00
< style >
:root {
--primary-color: #dc3545;
--primary-light: #e35d6a;
--secondary-color: #6c757d;
--secondary-light: #868e96;
--success-color: #198754;
--danger-color: #dc3545;
--warning-color: #ffc107;
--info-color: #0dcaf0;
--background-gradient: linear-gradient(135deg, var(--primary-color) 40%, white 100%);
--navbar-stripe: 4px solid var(--primary-color);
2025-04-03 15:31:02 -03:00
--table-header-bg: #d8dde2;
2025-04-03 13:48:09 -03:00
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #f8f9fa;
margin: 0;
padding: 0;
2025-04-03 14:37:30 -03:00
min-height: 100vh;
2025-04-03 13:48:09 -03:00
}
.navbar {
background: #343a40 !important;
padding: 0.5rem;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
border-bottom: var(--navbar-stripe);
}
.navbar > .container-fluid {
width: 100%;
max-width: 1140px;
margin: 0 auto;
padding: 0.5rem 1rem;
}
@media (max-width: 1200px) {
.navbar > .container-fluid {
max-width: 960px;
}
}
@media (max-width: 992px) {
.navbar > .container-fluid {
max-width: 720px;
}
}
@media (max-width: 768px) {
.navbar > .container-fluid {
max-width: 540px;
padding: 0.5rem;
}
}
@media (max-width: 576px) {
.navbar > .container-fluid {
width: 100%;
padding: 0.5rem;
}
}
.navbar-brand {
font-weight: bold;
color: var(--primary-color) !important;
display: flex;
align-items: center;
margin-right: 3rem;
white-space: nowrap;
}
.navbar-brand img {
height: 40px;
margin-right: 10px;
}
#navbarNav {
display: flex;
justify-content: center;
flex-grow: 1;
}
.navbar-nav.mx-auto {
margin: 0 auto !important;
}
.navbar-nav:last-child {
margin-left: auto;
}
.nav-link {
2025-04-03 14:37:30 -03:00
color: #fff !important;
2025-04-03 13:48:09 -03:00
transition: color 0.3s ease;
padding: 0.5rem 1rem;
white-space: nowrap;
}
.nav-link:hover {
2025-04-03 14:37:30 -03:00
color: rgba(255, 255, 255, 0.8) !important;
2025-04-03 13:48:09 -03:00
}
.nav-link.active {
2025-04-03 14:37:30 -03:00
color: rgba(255, 255, 255, 0.9) !important;
font-weight: 500;
2025-04-03 13:48:09 -03:00
}
.dropdown-menu {
border: none;
box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15);
}
.dropdown-item {
padding: 0.5rem 1.5rem;
transition: background-color 0.2s ease;
}
.dropdown-item:hover {
background-color: #f8f9fa;
}
.dropdown-item i {
margin-right: 0.5rem;
width: 1.25rem;
text-align: center;
}
.container {
2025-04-03 14:37:30 -03:00
max-width: 1320px !important;
margin: 0 auto !important;
}
@media (max-width: 1400px) {
.container {
max-width: 1140px !important;
}
2025-04-03 13:48:09 -03:00
}
@media (max-width: 1200px) {
.container {
2025-04-03 14:37:30 -03:00
max-width: 960px !important;
}
.page-wrapper {
padding: 1.5rem 0.75rem;
2025-04-03 13:48:09 -03:00
}
}
@media (max-width: 992px) {
.container {
2025-04-03 14:37:30 -03:00
max-width: 720px !important;
2025-04-03 13:48:09 -03:00
}
}
@media (max-width: 768px) {
.container {
2025-04-03 14:37:30 -03:00
max-width: 540px !important;
}
.page-wrapper {
padding: 1rem 0.5rem;
2025-04-03 13:48:09 -03:00
}
}
@media (max-width: 576px) {
2025-04-03 14:37:30 -03:00
.page-wrapper {
padding: 0.75rem 0.25rem;
2025-04-03 13:48:09 -03:00
}
}
/* Cards da Dashboard */
.card {
border: none;
border-radius: 0.5rem;
box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
height: 100%;
}
.card-header {
background-color: #f8f9fa;
border-bottom: 1px solid #e9ecef;
padding: 1rem;
}
.card-header .card-title {
margin: 0;
display: flex;
align-items: center;
gap: 0.5rem;
}
.card-header h5 {
margin: 0;
display: flex;
align-items: center;
font-size: 1.1rem;
}
.card-header h5 i {
margin-right: 0.75rem;
color: var(--primary-color);
}
.card-body {
padding: 1.5rem;
}
.card-footer {
background: none;
border-top: 1px solid rgba(0,0,0,0.05);
padding: 1rem 1.5rem;
}
/* Estatísticas da Dashboard */
.stats-card {
position: relative;
padding: 1.5rem;
border-radius: 0.5rem;
color: white;
box-shadow: 0 0.25rem 0.5rem rgba(0,0,0,0.1);
transition: transform 0.2s ease, box-shadow 0.2s ease;
overflow: hidden;
min-height: 140px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.stats-card:hover {
transform: translateY(-3px);
box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15);
}
.stats-card.blue {
background: linear-gradient(45deg, var(--primary-color), var(--primary-light));
}
.stats-card.green {
background: linear-gradient(45deg, #1cc88a, #13855c);
}
.stats-card.cyan {
background: linear-gradient(45deg, #36b9cc, #258391);
}
.stats-card.yellow {
background: linear-gradient(45deg, #f6c23e, #dda20a);
}
.stats-card .title {
font-size: 0.9rem;
font-weight: bold;
text-transform: uppercase;
margin-bottom: 0.5rem;
}
.stats-card .value {
font-size: 2rem;
font-weight: bold;
margin-bottom: 0.5rem;
}
.stats-card .icon {
position: absolute;
right: 1rem;
top: 1rem;
font-size: 2rem;
opacity: 0.2;
}
/* Tabelas */
.table {
margin-bottom: 0;
}
.table th {
border-top: none;
background-color: #f8f9fa;
font-weight: 600;
text-transform: uppercase;
font-size: 0.8rem;
letter-spacing: 0.5px;
}
.table td {
vertical-align: middle;
}
/* Botões */
.btn {
font-weight: 500;
padding: 0.5rem 1rem;
border-radius: 0.25rem;
transition: all 0.2s ease;
}
.btn-primary {
background-color: var(--primary-color);
border-color: var(--primary-color);
}
.btn-primary:hover {
background-color: var(--primary-light);
border-color: var(--primary-light);
}
.btn-outline-primary {
color: var(--primary-color);
border-color: var(--primary-color);
}
.btn-outline-primary:hover {
background-color: var(--primary-color);
border-color: var(--primary-color);
}
/* Alertas */
.alert {
border: none;
border-radius: 0.5rem;
padding: 1rem;
margin-bottom: 1rem;
}
.alert-success {
background-color: #d4edda;
color: #155724;
}
.alert-danger {
background-color: #f8d7da;
color: #721c24;
}
.alert-warning {
background-color: #fff3cd;
color: #856404;
}
.alert-info {
background-color: #d1ecf1;
color: #0c5460;
}
/* Formulários */
.form-control {
border-radius: 0.25rem;
border: 1px solid #ced4da;
padding: 0.5rem 0.75rem;
}
.form-control:focus {
border-color: var(--primary-color);
box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}
.form-label {
font-weight: 500;
margin-bottom: 0.5rem;
}
/* Modais */
.modal-content {
border: none;
border-radius: 0.5rem;
box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15);
}
.modal-header {
border-bottom: 1px solid #e9ecef;
padding: 1rem 1.5rem;
}
.modal-body {
padding: 1.5rem;
}
.modal-footer {
border-top: 1px solid #e9ecef;
padding: 1rem 1.5rem;
}
/* Responsividade */
@media (max-width: 768px) {
.navbar-brand {
margin-right: 1rem;
}
.navbar-brand img {
height: 30px;
}
.nav-link {
padding: 0.5rem;
}
.stats-card {
min-height: 120px;
}
.stats-card .value {
font-size: 1.5rem;
}
.stats-card .icon {
font-size: 1.5rem;
}
}
2025-04-03 14:37:30 -03:00
.page-wrapper {
padding: 2rem 1rem;
min-height: calc(100vh - 70px);
}
2025-04-03 15:31:02 -03:00
.table thead {
background-color: var(--table-header-bg) !important;
}
.btn-outline-primary {
color: #0d6efd;
border-color: #0d6efd;
}
.btn-outline-primary:hover {
color: #fff;
background-color: #0d6efd;
border-color: #0d6efd;
}
2025-04-03 13:48:09 -03:00
< / style >
2025-04-02 14:14:37 -03:00
{% block extra_css %}{% endblock %}
2025-02-19 14:27:14 -03:00
< / head >
< body >
2025-04-03 13:48:09 -03:00
<!-- Navbar -->
2025-04-02 14:14:37 -03:00
< nav class = "navbar navbar-expand-lg navbar-dark" >
2025-04-03 13:48:09 -03:00
< div class = "container-fluid" >
2025-04-02 14:55:01 -03:00
< a class = "navbar-brand" href = "{{ url_for('home') }}" >
2025-04-03 13:48:09 -03:00
< img src = "{{ url_for('static', filename='img/logo.png') }}" alt = "Logo" >
Controles OCI
2025-04-02 14:14:37 -03:00
< / a >
2025-02-19 14:27:14 -03:00
< button class = "navbar-toggler" type = "button" data-bs-toggle = "collapse" data-bs-target = "#navbarNav" >
< span class = "navbar-toggler-icon" > < / span >
< / button >
< div class = "collapse navbar-collapse" id = "navbarNav" >
2025-04-02 17:22:48 -03:00
< ul class = "navbar-nav mx-auto" >
2025-04-03 13:48:09 -03:00
< li class = "nav-item" >
< a class = "nav-link {% if request.endpoint == 'home' %}active{% endif %}" href = "{{ url_for('home') }}" >
< i class = "fas fa-home" > < / i > Início
2025-04-02 14:14:37 -03:00
< / a >
< / li >
2025-04-03 13:48:09 -03:00
< li class = "nav-item" >
< a class = "nav-link {% if request.endpoint == 'listar_militantes' %}active{% endif %}" href = "{{ url_for('listar_militantes') }}" >
< i class = "fas fa-users" > < / i > Militantes
2025-04-02 14:14:37 -03:00
< / a >
< / li >
2025-04-03 13:48:09 -03:00
< li class = "nav-item" >
< a class = "nav-link {% if request.endpoint == 'listar_materiais' %}active{% endif %}" href = "{{ url_for('listar_materiais') }}" >
< i class = "fas fa-box" > < / i > Materiais
2025-04-02 14:14:37 -03:00
< / a >
< / li >
2025-04-03 13:48:09 -03:00
< li class = "nav-item" >
< a class = "nav-link {% if request.endpoint == 'listar_pagamentos' %}active{% endif %}" href = "{{ url_for('listar_pagamentos') }}" >
< i class = "fas fa-money-bill" > < / i > Pagamentos
2025-04-02 14:14:37 -03:00
< / a >
< / li >
2025-02-19 14:27:14 -03:00
< / ul >
2025-03-24 16:34:38 -03:00
< ul class = "navbar-nav" >
2025-04-03 13:48:09 -03:00
< li class = "nav-item dropdown" >
< a class = "nav-link dropdown-toggle" href = "#" id = "userDropdown" role = "button" data-bs-toggle = "dropdown" >
< i class = "fas fa-user" > < / i > {{ current_user.username }}
2025-04-02 14:14:37 -03:00
< / a >
2025-04-03 13:48:09 -03:00
< ul class = "dropdown-menu dropdown-menu-end" >
< li >
< a class = "dropdown-item" href = "{{ url_for('logout') }}" >
< i class = "fas fa-sign-out-alt" > < / i > Sair
< / a >
< / li >
< / ul >
2025-04-03 15:58:07 -03:00
< / li >
2025-03-24 16:34:38 -03:00
< / ul >
2025-02-19 14:27:14 -03:00
< / div >
< / div >
< / nav >
2025-04-03 13:48:09 -03:00
2025-04-03 14:37:30 -03:00
< < < < < < < HEAD
2025-04-03 13:48:09 -03:00
<!-- Conteúdo -->
2025-02-19 14:27:14 -03:00
< div class = "container mt-4" >
2025-04-02 14:14:37 -03:00
{% with messages = get_flashed_messages(with_categories=true) %}
{% if messages %}
{% for category, message in messages %}
2025-04-03 13:48:09 -03:00
< div class = "alert alert-{{ category }} alert-dismissible fade show" >
2025-04-02 14:14:37 -03:00
{{ message }}
2025-04-03 13:48:09 -03:00
< button type = "button" class = "btn-close" data-bs-dismiss = "alert" > < / button >
2025-04-02 14:14:37 -03:00
< / div >
{% endfor %}
{% endif %}
{% endwith %}
2025-04-03 14:37:30 -03:00
=======
< div class = "page-wrapper" >
< div class = "container py-4" >
{% with messages = get_flashed_messages(with_categories=true) %}
{% if messages %}
{% for category, message in messages %}
< div class = "alert alert-{{ category }} alert-dismissible fade show" role = "alert" >
{{ message }}
< button type = "button" class = "btn-close" data-bs-dismiss = "alert" > < / button >
< / div >
{% endfor %}
{% endif %}
{% endwith %}
{% block content %}{% endblock %}
< / div >
< / div >
>>>>>>> 2499ae1 (style: melhora layout e espaçamento das interfaces - Ajusta margens e padding do container principal - Adiciona page-wrapper com espaçamento consistente - Corrige cores do menu para melhor legibilidade - Implementa responsividade para diferentes tamanhos de tela - Mantém estrutura consistente em todas as páginas)
2025-04-03 13:48:09 -03:00
2025-02-19 14:27:14 -03:00
{% block content %}{% endblock %}
< / div >
2025-04-02 14:14:37 -03:00
2025-04-03 13:48:09 -03:00
<!-- Scripts -->
< script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" > < / script >
2025-04-03 15:58:07 -03:00
< script >
2025-04-03 13:48:09 -03:00
// Auto-dismiss alerts after 5 seconds
2025-04-02 15:25:00 -03:00
document.addEventListener('DOMContentLoaded', function() {
2025-04-03 13:48:09 -03:00
setTimeout(function() {
var alerts = document.querySelectorAll('.alert');
alerts.forEach(function(alert) {
var bsAlert = new bootstrap.Alert(alert);
bsAlert.close();
});
}, 5000);
2025-04-02 15:25:00 -03:00
});
2025-04-03 13:48:09 -03:00
// Check session timeout
2025-04-03 15:58:07 -03:00
function checkSession() {
fetch('/check_session')
.then(response => response.json())
.then(data => {
2025-04-03 13:48:09 -03:00
if (data.status !== 'active') {
2025-04-03 15:58:07 -03:00
window.location.href = '/login';
}
2025-04-03 13:48:09 -03:00
});
2025-04-03 15:58:07 -03:00
}
2025-04-03 13:48:09 -03:00
// Check session every minute
setInterval(checkSession, 60000);
2025-04-03 15:58:07 -03:00
< / script >
2025-04-03 13:48:09 -03:00
{% block scripts %}{% endblock %}
2025-02-19 14:27:14 -03:00
< / body >
2025-02-20 10:39:31 -03:00
< / html >
