Gecko [ www.utparral.edu.mx ]

Name	Size	Permission
files	[ DIR ]	drwxrwxr-x
index.php	3.29 KB	-rw-rwxr--
lista_fina.php	1.04 KB	-rw-rwxr--
lista_poa.php	1.01 KB	-rw-rwxr--
list_files.php	1023 B	-rw-rwxr--
poa.php	3.26 KB	-rw-rwxr--
styles.css	2.58 KB	-rw-rwxr--
t_finanzas.php	3.28 KB	-rw-rwxr--

Code Editor : poa.php

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sistema de Archivos POA</title>
    <link rel="icon" type="image/png" href="../img/logo%20utp%20trazos%20fondos%20obscuros.png">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

h2 {
            text-align: center;
            margin-bottom: 20px;
        }

#file-tree {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
            gap: 15px;
            padding: 0;
            list-style: none;
        }

#file-tree li {
            background: white;
            border-radius: 10px;
            padding: 20px;
            text-align: center;
            cursor: pointer;
            box-shadow: 0 3px 6px rgba(0,0,0,0.1);
            transition: all 0.2s ease-in-out;
        }

#file-tree li:hover {
            transform: translateY(-4px);
            box-shadow: 0 6px 12px rgba(0,0,0,0.15);
        }

.folder-icon {
            font-size: 40px;
            color: #f4b400;
            margin-bottom: 10px;
        }

.file-icon {
            font-size: 40px;
            color: #4285f4;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
    <h2>Sistema de Archivos POA</h2>
    <ul id="file-tree"></ul>

function renderTree(files, container) {
            files.forEach(file => {
                const li = document.createElement('li');

if (file.type === 'folder') {
                    li.innerHTML = `<i class="fas fa-folder folder-icon"></i><br>${file.name}`;
                    li.onclick = (e) => {
                        e.stopPropagation();
                        container.innerHTML = ''; // Limpia vista
                        renderTree(file.children, container);
                    };
                } else {
                    li.innerHTML = `<i class="fas fa-file-alt file-icon"></i><br>${file.name}`;
                    li.onclick = (e) => {
                        e.stopPropagation();
                        openFile(file.path);
                    };
                }

container.appendChild(li);
            });
        }

function openFile(path) {
            path = decodeURIComponent(path);

// Si es un documento (PDF, Word, Excel, etc.), abrir en nueva pestaña
            if (/\.(pdf|docx?|xlsx?|pptx?)$/i.test(path)) {
                window.open(path, '_blank');
            } else {
                // Otros tipos de archivos también se abren en nueva pestaña
                window.open(path, '_blank');
            }
        }

loadFiles();
    </script>
</body>
</html>

${this.title}

Code Editor : poa.php