Tiny File Manager

Back Back Up Advanced Editor

<?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">
    
    <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>

<div class="menu-header">
        <img src="img/porteria.png" alt="Logo Porteria" class="logo" style="max-width: 650px;">
    </div>

<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>

<div class="footer">
    <div class="copyright">
        &#169; Avicampo <?php echo date('Y'); ?>
    </div>
</div>

<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;">&times;</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>

// 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.');
    }

// 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>