Tiny File Manager

Back Back Up Advanced Editor

<?php
include("connection.php");
$con = connection();

// Manejar la actualización de datos
if(isset($_POST['actualizar'])) {
    $id = $_POST['id'];
    $area = $_POST['area'];
    $codigo_activo = $_POST['codigo_activo'];
    $admin = $_POST['admin'];
    $contrasena_admin = $_POST['contrasena_admin'];
    $usuario_sesion = $_POST['usuario_sesion'];
    $contrasena_sesion = $_POST['contrasena_sesion'];
    
    $sql = "UPDATE Usuario_Sesion_PC SET 
            area=?, codigo_activo=?, admin=?, contrasena_admin=?, 
            usuario_sesion=?, contrasena_sesion=? 
            WHERE id=?";
    $stmt = $con->prepare($sql);
    $stmt->bind_param("ssssssi", 
        $area, $codigo_activo, $admin, $contrasena_admin, 
        $usuario_sesion, $contrasena_sesion, $id);
    $stmt->execute();
    
    // Recargar la página con los mismos parámetros de búsqueda
    header("Location: ".$_SERVER['PHP_SELF']."?area=".urlencode($area));
    exit();
}

$mostrarTabla = false;
$query = null;
$area = isset($_GET['area']) ? $_GET['area'] : '';

// Verificar si se ha enviado una búsqueda
if(isset($_POST['buscar']) && !empty($_POST['area'])) {
    $area = $_POST['area'];
    $mostrarTabla = true;
	
    // Usamos LIKE para búsqueda parcial y agregamos % alrededor del valor
    $area_like = "%".$area."%";
    $sql = "SELECT * FROM Usuario_Sesion_PC  WHERE area LIKE ? ORDER BY id DESC";
    $stmt = $con->prepare($sql);
    $stmt->bind_param("s", $area_like);
    $stmt->execute();
    $query = $stmt->get_result();	
}
?>
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Consulta de Sesion">
    <meta name="keywords" content="html, css, bases de datos, php">
    <meta name="author" content="Sebastian Obando">
    <meta name="copyright" content="Sebastian Obando">
    <meta name="google" content="notranslate">
    <title>Area Corporativo</title>
    <link rel="icon" type="image/png" href="../img/icono1.png">
    
    
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.js"></script>
    <link rel="stylesheet" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.css">
    
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            margin: 0;
            padding: 20px;
            background-image: linear-gradient(to right, #FF8626, #025159);
            min-height: 100vh;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
            background-color: rgba(255, 255, 255, 0.95);
            border-radius: 10px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
            overflow: hidden;
        }
        .header {
            background-color: #025159;
            color: white;
            padding: 20px;
            text-align: center;
        }
        .header h2 {
            margin: 0;
            font-size: 28px;
        }
        .search-container {
            background-color: #f8f9fa;
            padding: 25px;
            margin: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
            border-left: 5px solid #FF8626;
        }
        .search-container h3 {
            margin-top: 0;
            color: #025159;
            font-size: 20px;
            border-bottom: 1px solid #ddd;
            padding-bottom: 10px;
        }
        .filter-form {
            display: grid;
            grid-template-columns: 3fr 1fr;
            gap: 15px;
            align-items: end;
        }
        .form-group {
            margin-bottom: 0;
        }
        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
            color: #333;
        }
        .form-group input[type="text"] {
            width: 100%;
            padding: 10px 12px;
            border: 1px solid #ddd;
            border-radius: 6px;
            box-sizing: border-box;
            font-size: 16px;
            transition: border 0.3s;
        }
        .form-group input[type="text"]:focus {
            border-color: #FF8626;
            outline: none;
            box-shadow: 0 0 0 2px rgba(255, 134, 38, 0.2);
        }
        .form-group input[type="submit"] {
            background-color: #FF8626;
            color: white;
            border: none;
            padding: 12px 20px;
            border-radius: 6px;
            cursor: pointer;
            font-size: 16px;
            font-weight: 600;
            transition: background-color 0.3s;
            height: fit-content;
        }
        .form-group input[type="submit"]:hover {
            background-color: #e5761e;
        }
        .button-container {
            margin: 20px;
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
        }
        .button-container input[type="button"] {
            padding: 10px 20px;
            cursor: pointer;
            background-color: #FF8626;
            color: white;
            border: none;
            border-radius: 6px;
            font-weight: 600;
            transition: all 0.3s;
        }
        .button-container input[type="button"]:hover {
            background-color: #e5761e;
            transform: translateY(-2px);
        }
        .button-container input[type="button"].secondary {
            background-color: #4179b9;
        }
        .button-container input[type="button"].secondary:hover {
            background-color: #3568a0;
        }
        .no-results {
            padding: 20px;
            background-color: #f8d7da;
            color: #721c24;
            border-radius: 8px;
            margin: 20px;
            text-align: center;
        }
        .info-message {
            padding: 20px;
            background-color: #d1ecf1;
            color: #0c5460;
            border-radius: 8px;
            margin: 20px;
            text-align: center;
        }
        .users-table {
            margin: 20px;
            overflow-x: auto;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
        }
        table.display {
            width: 100%;
            border-collapse: collapse;
            background-color: white;
        }
        table.display th, table.display td {
            padding: 12px 15px;
            text-align: left;
            border-bottom: 1px solid #e0e0e0;
        }
        table.display th {
            background-color: #025159;
            color: white;
            font-weight: 600;
        }
        table.display tr:hover {
            background-color: #f5f5f5;
        }
        .copyright {
            text-align: center;
            margin-top: 30px;
            color: #666;
            font-size: 14px;
            padding: 20px;
            border-top: 1px solid #e0e0e0;
        }
        /* Estilos para los botones */
        .btn-editar {
            padding: 8px 15px;
            background-color: #FF8626;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-weight: 600;
            transition: background-color 0.3s;
        }
        .btn-editar:hover {
            background-color: #e5761e;
        }
        .btn-copiar {
            margin-left: 5px;
            padding: 5px 10px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 3px;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        .btn-copiar:hover {
            background-color: #45a049;
        }
        .btn-mostrar {
            margin-left: 5px;
            padding: 5px 10px;
            background-color: #2196F3;
            color: white;
            border: none;
            border-radius: 3px;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        .btn-mostrar:hover {
            background-color: #0b7dda;
        }
        .contrasena-oculta {
            filter: blur(4px);
            user-select: none;
            display: inline-block;
            min-width: 100px;
        }
        /* Notificación estilo toast */
        .toast {
            position: fixed;
            bottom: 20px;
            right: 20px;
            background-color: #4CAF50;
            color: white;
            padding: 12px 24px;
            border-radius: 6px;
            z-index: 1000;
            display: none;
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        }
        /* Estilos mejorados para el modal */
        .modal {
            display: none;
            position: fixed;
            z-index: 1000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.5);
            backdrop-filter: blur(5px);
            overflow: auto;
        }
        .modal-content {
            background-color: #fefefe;
            margin: 2% auto;
            padding: 25px;
            border: none;
            width: 90%;
            max-width: 700px;
            border-radius: 10px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.2);
            box-sizing: border-box;
            position: relative;
            animation: modalopen 0.4s;
        }
        
        /* Animación de apertura del modal */
        @keyframes modalopen {
            from {opacity: 0; transform: translateY(-50px);}
            to {opacity: 1; transform: translateY(0);}
        }
        
        .close {
            color: #aaa;
            position: absolute;
            top: 15px;
            right: 20px;
            font-size: 28px;
            font-weight: bold;
            cursor: pointer;
            transition: color 0.3s;
            z-index: 10;
        }
        .close:hover {
            color: #025159;
        }
        
        .form-field {
            margin-bottom: 20px;
        }
        .form-field label {
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
            color: #333;
        }
        .form-field input {
            width: 100%;
            padding: 12px;
            border: 1px solid #ddd;
            border-radius: 6px;
            box-sizing: border-box;
            transition: border 0.3s;
            font-size: 16px;
        }
        .form-field input:focus {
            border-color: #FF8626;
            outline: none;
            box-shadow: 0 0 0 2px rgba(255, 134, 38, 0.2);
        }
        
        /* Botones de acción del modal */
        .modal-actions {
            display: flex;
            justify-content: flex-end;
            gap: 10px;
            margin-top: 25px;
            flex-wrap: wrap;
        }
        .modal-actions button {
            padding: 12px 24px;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            font-weight: 600;
            transition: all 0.3s;
            font-size: 16px;
        }
        .btn-cancelar {
            background-color: #f0f0f0;
            color: #333;
        }
        .btn-cancelar:hover {
            background-color: #e0e0e0;
        }
        .btn-actualizar {
            background-color: #FF8626;
            color: white;
        }
        .btn-actualizar:hover {
            background-color: #e5761e;
        }
        
        .dataTables_wrapper .dataTables_paginate .paginate_button {
            padding: 5px 10px;
            margin-left: 2px;
            border: 1px solid transparent;
            border-radius: 4px;
            color: #025159 !important;
        }
        .dataTables_wrapper .dataTables_paginate .paginate_button.current {
            background: #FF8626;
            color: white !important;
            border: 1px solid #FF8626;
        }
        .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
            background: #025159;
            color: white !important;
            border: 1px solid #025159;
        }
        
        /* Media Queries para responsividad */
        @media (max-width: 768px) {
            .filter-form {
                grid-template-columns: 1fr;
            }
            .modal-content {
                width: 95%;
                margin: 5% auto;
                padding: 20px;
            }
            .modal-actions {
                flex-direction: column;
            }
            .modal-actions button {
                width: 100%;
            }
        }
        
        @media (max-width: 480px) {
            .modal-content {
                width: 98%;
                margin: 10% auto;
                padding: 15px;
            }
            .form-field input {
                padding: 10px;
            }
            .close {
                top: 10px;
                right: 15px;
                font-size: 24px;
            }
        }
        
        /* Para pantallas muy pequeñas (menos de 360px) */
        @media (max-width: 360px) {
            .modal-content {
                width: 100%;
                margin: 0;
                border-radius: 0;
                min-height: 100vh;
                padding: 15px;
            }
            body {
                padding: 0;
            }
        }
        
        /* Estilos para mejorar la legibilidad en móviles */
        @media (max-height: 600px) {
            .modal-content {
                max-height: 95vh;
                overflow-y: auto;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h2>Consulta de Sesión Por Área</h2>
        </div>
        
        <div class="search-container">
            <h3>Buscar Sesión Por Área</h3>
            <form method="POST" action="" class="filter-form">
                <div class="form-group">
                    <label for="area">Área:</label>
                    <input type="text" id="area" name="area" value="<?= htmlspecialchars($area) ?>" placeholder="Ingrese el área" required>
                </div>
                <div class="form-group">
                    <input type="submit" name="buscar" value="Buscar">
                </div>
            </form>
        </div>
        
        <div class="button-container">
            <input type="button" onclick="window.location.href='../index.php';" value="Menú">
            <input type="button" class="secondary" onclick="window.location.href='generarExcel.php';" value="Generar Excel">
        </div>
        
        <?php if($mostrarTabla): ?>
            <?php if($query && $query->num_rows > 0): ?>
                <div class="users-table">
                    <div style="overflow-x: auto;">
                        <table id="tablaPersonas" class="display">
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>Área</th>
                                    <th>Código Activo</th>
                                    <th>Administrador</th>
                                    <th>Contraseña Administrador</th>
                                    <th>Usuario</th>
                                    <th>Contraseña Usuario</th>
                                    <th>Acciones</th>
                                </tr>
                            </thead>
                            <tbody>
                                <?php while ($row = $query->fetch_assoc()): ?>
                                    <tr>
                                        <td><?= $row['id'] ?></td>
                                        <td><?= htmlspecialchars($row['area']) ?></td>
                                        <td><?= htmlspecialchars($row['codigo_activo']) ?></td>
                                        <td><?= htmlspecialchars($row['admin']) ?></td>
                                        <td>
                                            <span class="contrasena-oculta"><?= htmlspecialchars($row['contrasena_admin']) ?></span>
                                            <button class="btn-copiar" onclick="copiarContrasena('<?= htmlspecialchars($row['contrasena_admin'], ENT_QUOTES) ?>')">
                                                <i class="far fa-copy"></i> Copiar
                                            </button>
                                            <button class="btn-mostrar" onclick="mostrarContrasena(this)">
                                                <i class="far fa-eye"></i> Mostrar
                                            </button>
                                        </td>
                                        <td><?= htmlspecialchars($row['usuario_sesion']) ?></td>
                                        <td>
                                            <span class="contrasena-oculta"><?= htmlspecialchars($row['contrasena_sesion']) ?></span>
                                            <button class="btn-copiar" onclick="copiarContrasena('<?= htmlspecialchars($row['contrasena_sesion'], ENT_QUOTES) ?>')">
                                                <i class="far fa-copy"></i> Copiar
                                            </button>
                                            <button class="btn-mostrar" onclick="mostrarContrasena(this)">
                                                <i class="far fa-eye"></i> Mostrar
                                            </button>
                                        </td>
                                        <td>
                                            <button class="btn-editar" onclick="openEditModal(
                                                '<?= $row['id'] ?>',
                                                '<?= htmlspecialchars($row['area'], ENT_QUOTES) ?>',
                                                '<?= htmlspecialchars($row['codigo_activo'], ENT_QUOTES) ?>',
                                                '<?= htmlspecialchars($row['admin'], ENT_QUOTES) ?>',
                                                '<?= htmlspecialchars($row['contrasena_admin'], ENT_QUOTES) ?>',
                                                '<?= htmlspecialchars($row['usuario_sesion'], ENT_QUOTES) ?>',
                                                '<?= htmlspecialchars($row['contrasena_sesion'], ENT_QUOTES) ?>'
                                            )">
                                                <i class="fas fa-edit"></i> Editar
                                            </button>
                                        </td>
                                    </tr>
                                <?php endwhile; ?>
                            </tbody>
                        </table>
                    </div>
                </div>
            <?php else: ?>
                <div class="no-results">
                    <p>No se encontraron registros para el área: <strong><?= htmlspecialchars($area) ?></strong></p>
                </div>
            <?php endif; ?>
        <?php else: ?>
            <div class="info-message">
                <p>Ingrese el área para Consultar la Sesión.</p>
            </div>
        <?php endif; ?>
    </div>

<div id="editModal" class="modal">
        <div class="modal-content">
            <span class="close" onclick="closeEditModal()">&times;</span>
            <h2 style="color: #025159; margin-bottom: 20px; padding-right: 30px;">Editar Información de Sesión</h2>
            <form id="editForm" method="POST" action="">
                <input type="hidden" id="editId" name="id">
                
                <div class="form-field">
                    <label>Área:</label>
                    <input type="text" id="editArea" name="area" required>
                </div>
                
                <div class="form-field">
                    <label>Código Activo:</label>
                    <input type="text" id="editCodigoActivo" name="codigo_activo" required>
                </div>
                
                <div class="form-field">
                    <label>Administrador:</label>
                    <input type="text" id="editAdmin" name="admin" required>
                </div>
                
                <div class="form-field">
                    <label>Contraseña Administrador:</label>
                    <input type="text" id="editContrasenaAdmin" name="contrasena_admin" required>
                </div>
                
                <div class="form-field">
                    <label>Usuario Sesión:</label>
                    <input type="text" id="editUsuarioSesion" name="usuario_sesion" required>
                </div>
                
                <div class="form-field">
                    <label>Contraseña Usuario:</label>
                    <input type="text" id="editContrasenaSesion" name="contrasena_sesion" required>
                </div>
                
                <div class="modal-actions">
                    <button type="button" class="btn-cancelar" onclick="closeEditModal()">
                        <i class="fas fa-times"></i> Cancelar
                    </button>
                    <button type="submit" class="btn-actualizar" name="actualizar">
                        <i class="fas fa-save"></i> Actualizar
                    </button>
                </div>
            </form>
        </div>
    </div>

<div id="toast" class="toast"></div>

<script>
        $(document).ready(function () {
            <?php if($mostrarTabla && $query && $query->num_rows > 0): ?>
            $('#tablaPersonas').DataTable({
                "paging": true,
                "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "Todos"]],
                "searching": true,
                "language": {
                    "url": "//cdn.datatables.net/plug-ins/1.11.5/i18n/Spanish.json"
                },
                "order": [[0, 'desc']],
                "autoWidth": false,
                "responsive": true,
                "dom": '<"top"lf>rt<"bottom"ip><"clear">'
            });
            <?php endif; ?>
        });

// Función para abrir el modal de edición
        function openEditModal(id, area, codigo_activo, admin, contrasena_admin, usuario_sesion, contrasena_sesion) {
            document.getElementById('editId').value = id;
            document.getElementById('editArea').value = area;
            document.getElementById('editCodigoActivo').value = codigo_activo;
            document.getElementById('editAdmin').value = admin;
            document.getElementById('editContrasenaAdmin').value = contrasena_admin;
            document.getElementById('editUsuarioSesion').value = usuario_sesion;
            document.getElementById('editContrasenaSesion').value = contrasena_sesion;
            
            document.getElementById('editModal').style.display = 'block';
            document.body.style.overflow = 'hidden'; // Previene el scroll del fondo
        }

// Función para cerrar el modal de edición
        function closeEditModal() {
            document.getElementById('editModal').style.display = 'none';
            document.body.style.overflow = 'auto'; // Restaura el scroll del fondo
        }

// Función para copiar la contraseña al portapapeles
        function copiarContrasena(contrasena) {
            // Crear un elemento temporal para copiar
            const tempInput = document.createElement("input");
            tempInput.value = contrasena;
            document.body.appendChild(tempInput);
            tempInput.select();
            document.execCommand("copy");
            document.body.removeChild(tempInput);
            
            // Mostrar notificación
            mostrarToast("Contraseña copiada al portapapeles");
        }

// Función para mostrar/ocultar la contraseña
        function mostrarContrasena(boton) {
            const contrasenaSpan = boton.parentElement.querySelector('.contrasena-oculta');
            const icono = boton.querySelector('i');
            
            if(contrasenaSpan.style.filter === 'blur(4px)' || !contrasenaSpan.style.filter) {
                contrasenaSpan.style.filter = 'none';
                icono.className = 'far fa-eye-slash';
                boton.innerHTML = '<i class="far fa-eye-slash"></i> Ocultar';
            } else {
                contrasenaSpan.style.filter = 'blur(4px)';
                icono.className = 'far fa-eye';
                boton.innerHTML = '<i class="far fa-eye"></i> Mostrar';
            }
        }

// Función para mostrar notificación toast
        function mostrarToast(mensaje) {
            const toast = document.getElementById('toast');
            toast.textContent = mensaje;
            toast.style.display = 'block';
            
            setTimeout(() => {
                toast.style.display = 'none';
            }, 2000);
        }

// Cierra el modal si se hace clic fuera del contenido
        window.onclick = function(event) {
            var modal = document.getElementById('editModal');
            if (event.target == modal) {
                closeEditModal();
            }
        }
        
        // Cierra el modal con la tecla Escape
        document.addEventListener('keydown', function(event) {
            if (event.key === 'Escape') {
                closeEditModal();
            }
        });
    </script>
    
    <div class="copyright">
        &#169; Avicampo <?php echo date('Y'); ?>
    </div>
</body>
</html>