File "menu-20260419125653.php"
Full Path: C:/wamp64/www/porteria/menu-20260419125653.php
File size: 19.39 KB
MIME-type: text/x-php
Charset: utf-8
<?php
include("connection.php");
$con = connection();
// Verificar si el usuario está logueado
session_start();
if (!isset($_SESSION['logged_in']) || $_SESSION['logged_in'] !== true) {
header('Location: login.html');
exit;
}
// Verificar vehículos con más de 2 días pendientes - CORREGIDO
$fecha_limite = date('Y-m-d', strtotime('-2 days')); // Solo fecha
$sqlAlertas = "SELECT * FROM vehiculos
WHERE estado != 'salida'
AND DATE(FECHA) <= '$fecha_limite'
ORDER BY FECHA ASC";
$queryAlertas = mysqli_query($con, $sqlAlertas);
$vehiculosAlerta = [];
$totalAlertas = 0;
while ($row = mysqli_fetch_assoc($queryAlertas)) {
$vehiculosAlerta[] = $row;
$totalAlertas++;
}
?>
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="Sebastian Obando">
<meta name="copyright" content="Sebastian Obando">
<title>Menú Porteria</title>
<link rel="icon" type="image/png" href="img/icono.png">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
background-image: linear-gradient(to right, #e2e2e2, #ffe5c9);
overflow-x: hidden;
position: relative;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
}
/* Contenedor principal */
.main-container {
width: 95%;
max-width: 1200px;
background-color: rgba(255, 255, 255, 0.9);
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
margin: 20px auto;
padding: 25px;
position: relative;
z-index: 1;
}
/* Header del menú */
.menu-header {
text-align: center;
margin-bottom: 25px;
padding-bottom: 15px;
border-bottom: 2px solid #FF8C00;
}
.logo {
display: block;
margin: 0 auto 1rem;
max-width: 100%;
height: auto;
}
.user-info {
text-align: right;
margin-bottom: 15px;
font-size: 14px;
color: #555;
}
.logout-btn {
background-color: #ff7b00;
color: white;
border: none;
padding: 8px 15px;
border-radius: 5px;
cursor: pointer;
font-size: 14px;
transition: background-color 0.3s;
}
.logout-btn:hover {
background-color: #e66a00;
}
/* Estilos del menú */
.menu-container {
display: flex;
justify-content: center;
padding: 20px;
flex-wrap: wrap;
gap: 25px;
margin-top: 20px;
}
.menu-button {
width: 160px;
height: 190px;
border-radius: 15px;
border: 2px solid #FF8C00;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
color: #000;
font-weight: bold;
text-decoration: none;
position: relative;
cursor: pointer;
transition: all 0.3s ease;
background-color: white;
padding: 15px 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.menu-button:hover {
transform: translateY(-5px);
box-shadow: 0 8px 15px rgba(255, 140, 0, 0.3);
border-color: #e66a00;
}
.button-image {
width: 85px;
height: 85px;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
margin-bottom: 12px;
}
.button-text {
background-color: rgba(255, 255, 255, 0.9);
padding: 8px 12px;
border-radius: 8px;
text-align: center;
font-size: 13px;
width: 100%;
border: 1px solid #f0f0f0;
}
/* Estilos del footer */
.footer {
margin-top: 30px;
text-align: center;
width: 100%;
padding: 15px 0;
}
@font-face {
font-family: 'Gardenia';
src: local('Gardenia Black Italic'), local('Gardenia-Black-Italic'),
url('Gardenia-BlackItalic.woff2') format('woff2'),
url('Gardenia-BlackItalic.woff') format('woff'),
url('Gardenia-BlackItalic.ttf') format('truetype');
font-weight: 900;
font-style: italic;
}
.copyright {
display: inline-block;
padding: 10px 25px;
background-color: white;
border: 1px solid #000;
border-radius: 8px;
font-size: 14px;
font-family: 'Gardenia', sans-serif;
font-weight: 900;
font-style: italic;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
/* Estilos para el modal de alertas */
.modal {
display: none;
position: fixed;
z-index: 10000;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
animation: fadeIn 0.3s;
}
.modal-content {
background-color: #fff;
border-radius: 8px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
animation: slideIn 0.3s;
margin: 5% auto;
max-width: 900px;
}
.modal-header {
padding: 20px;
display: flex;
justify-content: space-between;
align-items: center;
border-radius: 8px 8px 0 0;
}
.close {
color: #aaa;
font-size: 28px;
font-weight: bold;
cursor: pointer;
}
.close:hover {
color: #000;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes slideIn {
from { transform: translateY(-50px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}
/* Responsive */
@media (max-width: 768px) {
.main-container {
width: 98%;
padding: 15px;
}
.menu-button {
width: 140px;
height: 170px;
}
.button-image {
width: 70px;
height: 70px;
}
.logo {
max-width: 90%;
}
.modal-content {
width: 95%;
margin: 10% auto;
}
}
@media (max-width: 480px) {
.menu-button {
width: 130px;
height: 160px;
}
.button-text {
font-size: 12px;
padding: 6px 8px;
}
.user-info {
text-align: center;
font-size: 12px;
}
}
</style>
</head>
<body>
<div class="main-container">
<!-- Información de usuario y botón de cerrar sesión -->
<div class="user-info">
Bienvenido, <strong><?php echo $_SESSION['user'] ?? 'Usuario'; ?></strong>
<?php if ($totalAlertas > 0): ?>
<span style="background-color: #dc3545; color: white; padding: 3px 8px; border-radius: 12px; font-size: 12px; margin-left: 10px; animation: pulse 2s infinite;">
⚠️ <?= $totalAlertas ?> Alerta(s)
</span>
<?php endif; ?>
|
<button class="logout-btn" onclick="logout()">Cerrar Sesión</button>
<?php if ($totalAlertas > 0): ?>
<button onclick="mostrarAlertaPendientes()"
style="background-color: #ffc107; color: black; border: none; padding: 5px 10px; border-radius: 4px; margin-left: 10px; cursor: pointer; font-size: 12px;">
Ver Alertas
</button>
<?php endif; ?>
</div>
<!-- Header con logo -->
<div class="menu-header">
<img src="img/porteria.png" alt="Logo Porteria" class="logo" style="max-width: 650px;">
</div>
<!-- Menú de botones -->
<div class="menu-container">
<?php
// Configuración de los botones
$buttons = [
['text' => 'VISITANTES', 'link' => 'visitantes/ingresoVisitantes.php', 'image' => 'img/ingreso.png'],
['text' => 'PERMISOS COLABORADORES', 'link' => 'colaboradores/permisosColaboradores.php', 'image' => 'img/permiso.png'],
['text' => 'VEHICULOS', 'link' => 'vehiculos/crearVehiculo.php', 'image' => 'img/ingresoCarro.png'],
['text' => 'REPORTES', 'link' => 'Reportes/reportes.php', 'image' => 'img/registroC.png']
];
foreach ($buttons as $button) {
echo '<a href="' . $button['link'] . '" class="menu-button">';
echo '<div class="button-image" style="background-image: url(\'' . $button['image'] . '\');"></div>';
echo '<span class="button-text">' . $button['text'] . '</span>';
echo '</a>';
}
?>
</div>
</div>
<!-- Footer con copyright -->
<div class="footer">
<div class="copyright">
© Avicampo <?php echo date('Y'); ?>
</div>
</div>
<!-- Modal de Alerta para Vehículos Pendientes -->
<div id="modalAlerta" class="modal" style="display: none;">
<div class="modal-content">
<div class="modal-header" style="background-color: #dc3545; color: white;">
<h3 class="modal-title" style="margin: 0;">⚠️ ALERTA - Vehículos Pendientes</h3>
<span class="close" onclick="cerrarAlertaTemporalmente()" style="color: white; font-size: 28px;">×</span>
</div>
<div style="padding: 20px;">
<div style="background-color: #fff3cd; border: 1px solid #ffeaa7; border-radius: 5px; padding: 15px; margin-bottom: 20px;">
<h4 style="color: #856404; margin: 0; display: flex; align-items: center;">
<span style="font-size: 24px; margin-right: 10px;">⚠️</span>
Hay <?php echo $totalAlertas; ?> vehículo(s) con más de 2 días pendientes de salida
</h4>
</div>
<div id="listaAlertas" style="max-height: 400px; overflow-y: auto;">
<?php if ($totalAlertas > 0): ?>
<table style="width: 100%; border-collapse: collapse; font-size: 14px;">
<thead>
<tr style="background-color: #f8f9fa;">
<th style="padding: 12px; border: 1px solid #ddd; text-align: left;">ID</th>
<th style="padding: 12px; border: 1px solid #ddd; text-align: left;">Fecha Ingreso</th>
<th style="padding: 12px; border: 1px solid #ddd; text-align: left;">Conductor</th>
<th style="padding: 12px; border: 1px solid #ddd; text-align: left;">Placa</th>
<th style="padding: 12px; border: 1px solid #ddd; text-align: left;">Grupo</th>
<th style="padding: 12px; border: 1px solid #ddd; text-align: left;">Estado</th>
<th style="padding: 12px; border: 1px solid #ddd; text-align: left;">Días Pendiente</th>
</tr>
</thead>
<tbody>
<?php foreach ($vehiculosAlerta as $vehiculo):
$fecha_ingreso = new DateTime($vehiculo['FECHA']);
$fecha_actual = new DateTime();
$dias_pendiente = $fecha_actual->diff($fecha_ingreso)->days;
// Asegurar que sea al menos 2 días
if ($dias_pendiente < 2) {
continue; // Saltar vehículos con menos de 2 días
}
$color_fondo = $dias_pendiente > 3 ? '#f8d7da' : '#fff3cd';
$color_texto = $dias_pendiente > 3 ? '#721c24' : '#856404';
?>
<tr style="background-color: <?= $color_fondo ?>;">
<td style="padding: 12px; border: 1px solid #ddd; color: <?= $color_texto ?>;"><?= $vehiculo['REG'] ?></td>
<td style="padding: 12px; border: 1px solid #ddd; color: <?= $color_texto ?>;"><?= date('d/m/Y H:i', strtotime($vehiculo['FECHA'])) ?></td>
<td style="padding: 12px; border: 1px solid #ddd; color: <?= $color_texto ?>;"><?= $vehiculo['CONDUCTOR'] ?></td>
<td style="padding: 12px; border: 1px solid #ddd; color: <?= $color_texto ?>;"><?= $vehiculo['PLACA'] ?></td>
<td style="padding: 12px; border: 1px solid #ddd; color: <?= $color_texto ?>;"><?= $vehiculo['GRUPO'] ?></td>
<td style="padding: 12px; border: 1px solid #ddd; color: <?= $color_texto ?>;">
<span style="padding: 4px 8px; border-radius: 12px; font-size: 12px; background-color: #ffc107; color: black;">
<?= ucfirst($vehiculo['ESTADO'] ?? 'creado') ?>
</span>
</td>
<td style="padding: 12px; border: 1px solid #ddd; font-weight: bold; color: #dc3545;">
<?= $dias_pendiente ?> días
</td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
<?php else: ?>
<div style="text-align: center; padding: 40px; color: #28a745;">
<h4 style="font-size: 24px; margin-bottom: 10px;">✅</h4>
<h4>No hay vehículos pendientes por más de 2 días</h4>
<p>Todos los vehículos están al día.</p>
</div>
<?php endif; ?>
</div>
<div style="margin-top: 25px; text-align: center; border-top: 1px solid #eee; padding-top: 20px;">
<button onclick="cerrarAlertaTemporalmente()"
style="background-color: #6c757d; color: white; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer; margin-right: 10px;">
Cerrar (volverá en 10 min)
</button>
<button onclick="window.location.href='vehiculos/crearVehiculo.php'"
style="background-color: #007bff; color: white; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer; margin-right: 10px;">
Ir a Vehículos
</button>
</div>
<div style="margin-top: 15px; text-align: center; font-size: 12px; color: #6c757d;">
Próxima verificación automática en: <span id="contadorTiempo">10:00</span> minutos
</div>
</div>
</div>
</div>
<script>
// Función para cerrar sesión
function logout() {
if (confirm('¿Estás seguro de que deseas cerrar sesión?')) {
window.location.href = 'logout.php';
}
}
// Efecto de carga suave para los botones
document.addEventListener('DOMContentLoaded', function() {
const buttons = document.querySelectorAll('.menu-button');
buttons.forEach((button, index) => {
button.style.opacity = '0';
button.style.transform = 'translateY(20px)';
setTimeout(() => {
button.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
button.style.opacity = '1';
button.style.transform = 'translateY(0)';
}, 100 * index);
});
});
// Sistema de alertas para vehículos pendientes
let temporizadorAlerta;
let tiempoRestante = 120; // 10 minutos en segundos
function mostrarAlertaPendientes() {
<?php if ($totalAlertas > 0): ?>
document.getElementById('modalAlerta').style.display = 'block';
iniciarContador();
// Mostrar notificación en consola
console.log('🚨 ALERTA: Se detectaron <?= $totalAlertas ?> vehículo(s) pendientes por más de 2 días');
<?php endif; ?>
}
function cerrarAlertaTemporalmente() {
document.getElementById('modalAlerta').style.display = 'none';
clearInterval(temporizadorAlerta);
// Programar para que vuelva a mostrarse en 10 minutos
setTimeout(function() {
location.reload(); // Recargar la página para verificar nuevamente
}, 10 * 60 * 1000); // 10 minutos
console.log('Alerta cerrada. Volverá a verificar en 10 minutos.');
}
function iniciarContador() {
tiempoRestante = 120; // Reiniciar a 2 minutos
actualizarContador();
temporizadorAlerta = setInterval(function() {
tiempoRestante--;
actualizarContador();
if (tiempoRestante <= 0) {
clearInterval(temporizadorAlerta);
}
}, 1000);
}
function actualizarContador() {
const minutos = Math.floor(tiempoRestante / 60);
const segundos = tiempoRestante % 60;
const contador = document.getElementById('contadorTiempo');
if (contador) {
contador.textContent = `${minutos.toString().padStart(2, '0')}:${segundos.toString().padStart(2, '0')}`;
}
}
// Mostrar alerta al cargar la página
document.addEventListener('DOMContentLoaded', function() {
// Esperar 2 segundos antes de mostrar la alerta para que cargue toda la página
setTimeout(function() {
mostrarAlertaPendientes();
}, 2000);
// También configurar verificación periódica cada 10 minutos
setInterval(function() {
location.reload();
}, 10 * 60 * 1000); // 10 minutos
});
// Cerrar modal si se hace clic fuera de él
window.onclick = function(event) {
const modal = document.getElementById('modalAlerta');
if (event.target == modal) {
cerrarAlertaTemporalmente();
}
}
</script>
</body>
</html>