347 lines
14 KiB
Plaintext
347 lines
14 KiB
Plaintext
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<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">
|
|
|
|
<title>Cloud SIGMA</title>
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
|
|
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.0/css/all.min.css" rel="stylesheet"
|
|
crossorigin="anonymous">
|
|
|
|
<link href="./css/tipografias.css" rel="stylesheet" type="text/css" />
|
|
<link href="./css/cloud.css" rel="stylesheet" type="text/css" />
|
|
|
|
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
|
|
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
|
|
crossorigin="anonymous"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js"
|
|
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
|
|
crossorigin="anonymous"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js"
|
|
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
|
|
crossorigin="anonymous"></script>
|
|
|
|
<script type="text/javascript">
|
|
function modal(url) {
|
|
var array = url.split(".");
|
|
var tipo = array.pop();
|
|
var contentHTML = ''; // Variable para almacenar el HTML a inyectar
|
|
|
|
if (modo_img(tipo)) {
|
|
contentHTML = `<img class="img-fluid rounded" src="files/${url}" style="border-radius: 15px; box-shadow: 0 10px 30px rgba(0,0,0,0.3);">`;
|
|
} else if (modo_video(tipo)) {
|
|
var anch = window.innerWidth;
|
|
var porc = 10;
|
|
if (anch > 1400) {
|
|
porc = 53;
|
|
} else if (anch > 1200) {
|
|
porc = 40;
|
|
} else if (anch > 992) {
|
|
porc = 32;
|
|
} else if (anch > 768) {
|
|
porc = 52;
|
|
} else if (anch > 576) {
|
|
porc = 35;
|
|
}
|
|
contentHTML = `
|
|
<video id="rep-video" width="${anch - (anch * porc / 100)}" controls preload="auto" style="border-radius: 15px; box-shadow: 0 10px 30px rgba(0,0,0,0.3);">
|
|
<source src="files/${url}" type="video/${tipo}">
|
|
</video>`;
|
|
} else if (modo_music(tipo)) {
|
|
contentHTML = `<div class="text-center">
|
|
<img src="img/Music-icon.png" style="width: 100px; height: 100px; border-radius: 50%; box-shadow: 0 10px 30px rgba(0,0,0,0.3); margin-bottom: 20px;">
|
|
<video controls preload="auto" id="ctrl_audio" style="width: 100%; border-radius: 15px;">
|
|
<source src="files/${url}" type="audio/${tipo}">
|
|
</video></div>`;
|
|
} else if (modo_pdf(tipo)) { // *** NUEVA LÓGICA PARA PDF ***
|
|
// Usamos un iframe para incrustar el PDF. El navegador lo renderizará.
|
|
// Se añade estilo para que el iframe ocupe el espacio disponible y tenga un buen aspecto.
|
|
contentHTML = `
|
|
<div style="width: 100%; height: 60vh;"> <iframe src="files/${url}" style="width: 100%; height: 100%; border: none; border-radius: 15px; box-shadow: 0 10px 30px rgba(0,0,0,0.3);">
|
|
Este navegador no soporta PDFs incrustados. Puedes descargarlo <a href="files/${url}">aquí</a>.
|
|
</iframe>
|
|
</div>
|
|
`;
|
|
} else {
|
|
contentHTML = `<img class="img-fluid rounded" src="img/desc256.png" style="border-radius: 15px; box-shadow: 0 10px 30px rgba(0,0,0,0.3);">`;
|
|
}
|
|
|
|
document.getElementById("data").innerHTML = contentHTML; // Inyecta el HTML generado
|
|
document.getElementById("titulo").innerHTML = `<i class="fas fa-download me-2"></i>Descargar: <a href="files/${url}" style="color: #667eea; text-decoration: none;">${url}</a>`;
|
|
$("#myModal").modal({ backdrop: true });
|
|
}
|
|
|
|
function modo_img(file) {
|
|
var tipoImg = ["jpg", "jpeg", "png", "gif", "bmp", "tiff", "svg", "webp", "ico", "psd", "ai", "eps", "raw", "cr2", "nef", "orf", "sr2", "rw2", "dng", "arw", "3fr", "dcr", "kdc", "erf", "mrw", "pef", "raf", "x3f", "srw", "rwl", "r3d", "rwz", "z6ii", "z5", "drf", "k25", "bay", "cap", "iiq", "fff", "mef", "mos", "crw", "erf", "kdc", "dcs", "gpr", "mef", "mos", "nef", "nrw", "orf", "raw", "rw2", "rwl", "sr2", "srf", "x3f"];
|
|
return tipoImg.includes(file.toLowerCase());
|
|
}
|
|
|
|
function modo_video(file) {
|
|
var tipoVideo = ["mp4", "mpg", "webm", "avi", "mkv", "mov", "wmv", "flv", "3gp", "m4v"];
|
|
return tipoVideo.includes(file.toLowerCase());
|
|
}
|
|
|
|
function modo_music(file) {
|
|
var tipoMusic = ["mp3", "acc", "wav", "wma", "ogg", "m4a"];
|
|
return tipoMusic.includes(file.toLowerCase());
|
|
}
|
|
|
|
// *** NUEVA FUNCIÓN PARA IDENTIFICAR PDF ***
|
|
function modo_pdf(file) {
|
|
var tipoPdf = ["pdf"];
|
|
return tipoPdf.includes(file.toLowerCase());
|
|
}
|
|
|
|
// --- CÓDIGO DE BÚSQUEDA ---
|
|
$(document).ready(function() {
|
|
$('form.search-container').submit(function(event) {
|
|
event.preventDefault();
|
|
});
|
|
|
|
$('#searchInput').on('keyup', function() {
|
|
var searchText = $(this).val().toLowerCase();
|
|
$('#filesTableBody tr').each(function() {
|
|
var fileName = $(this).find('.file-name').text().toLowerCase();
|
|
if (fileName.includes(searchText)) {
|
|
$(this).show();
|
|
} else {
|
|
$(this).hide();
|
|
}
|
|
});
|
|
});
|
|
|
|
// --- CÓDIGO PARA LA SUBIDA AJAX Y MODAL ---
|
|
const uploadForm = document.getElementById('uploadForm');
|
|
const fileInput = document.getElementById('fileInput');
|
|
const messageModal = document.getElementById('messageModal');
|
|
const modalTitle = document.getElementById('modalTitleMessage');
|
|
const modalMessage = document.getElementById('modalBodyMessage');
|
|
const modalCloseButton = document.getElementById('modalCloseButton');
|
|
|
|
uploadForm.addEventListener('submit', function(e) {
|
|
e.preventDefault();
|
|
|
|
const formData = new FormData(this);
|
|
|
|
const submitButton = this.querySelector('input[type="submit"]');
|
|
submitButton.disabled = true;
|
|
submitButton.value = 'Subiendo...';
|
|
|
|
fetch(this.action, {
|
|
method: this.method,
|
|
body: formData
|
|
})
|
|
.then(response => {
|
|
if (!response.ok) {
|
|
return response.json().then(errorData => {
|
|
throw new Error(errorData.message || 'Error en la respuesta del servidor');
|
|
});
|
|
}
|
|
return response.json();
|
|
})
|
|
.then(data => {
|
|
if (data.status === 'success') {
|
|
modalTitle.textContent = '¡Subida Exitosa!';
|
|
modalMessage.textContent = data.message;
|
|
} else {
|
|
modalTitle.textContent = 'Error en la Subida';
|
|
modalMessage.textContent = data.message || 'Ocurrió un error desconocido al subir el archivo.';
|
|
}
|
|
$('#messageModal').modal('show');
|
|
})
|
|
.catch(error => {
|
|
console.error('Error al subir el archivo:', error);
|
|
modalTitle.textContent = 'Error de Conexión';
|
|
modalMessage.textContent = 'No se pudo conectar con el servidor o hubo un error inesperado: ' + error.message;
|
|
$('#messageModal').modal('show');
|
|
})
|
|
.finally(() => {
|
|
submitButton.disabled = false;
|
|
submitButton.value = '📤 SUBIR ARCHIVO';
|
|
fileInput.value = '';
|
|
});
|
|
});
|
|
|
|
$('#messageModal').on('hidden.bs.modal', function (e) {
|
|
// Puedes agregar lógica aquí, por ejemplo, recargar la página
|
|
// para que la lista de archivos se actualice automáticamente.
|
|
// window.location.reload();
|
|
// O mejor: realizar otra solicitud AJAX para obtener la lista actualizada de archivos.
|
|
});
|
|
});
|
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const elements = document.querySelectorAll('.upload-card, .files-card');
|
|
elements.forEach((el, index) => {
|
|
el.style.animationDelay = `${index * 0.2}s`;
|
|
el.classList.add('animate-fadeInUp');
|
|
});
|
|
});
|
|
</script>
|
|
</head>
|
|
|
|
<body>
|
|
<nav class="navbar navbar-expand navbar-dark navbar-custom">
|
|
<div class="container-fluid">
|
|
<div id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
|
<a class="navbar-brand dropdown-toggle" href="#">
|
|
<img src="img/favicon_sigma/android-chrome-192x192.png" alt="Cloud SIGMA" width="36" height="36">
|
|
</a>
|
|
<div class="dropdown-menu" aria-labelledby="dropdownMenu2">
|
|
<div class="user-header">
|
|
<img src="img/usuario.jpeg" class="img-circle" alt="User Image">
|
|
<p>
|
|
<strong>ID# <span id="usr_id">8</span></strong><br>
|
|
<strong>Usuario: <span id="usr_nom">PABLO FARIAS</span></strong><br>
|
|
<small>Miembro desde: <span id="usr_reg">2022-02-18 23:39:00</span></small>
|
|
</p>
|
|
</div>
|
|
<div class="user-body">
|
|
<div class="row text-center">
|
|
<div class="col-4">
|
|
<a href="#"><i class="fas fa-users me-1"></i>Seguidores</a>
|
|
</div>
|
|
<div class="col-4">
|
|
<a href="#"><i class="fas fa-id-card me-1"></i>UID: 64b06b022c7b9</a>
|
|
</div>
|
|
<div class="col-4">
|
|
<a href="#"><i class="fas fa-user-friends me-1"></i>Amigos</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="user-footer">
|
|
<a href="#" class="btn"><i class="fas fa-user me-1"></i>Perfil</a>
|
|
<a href="../cloud" class="btn"><i class="fas fa-sign-out-alt me-1"></i>Cerrar Sesión</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<form class="d-flex search-container">
|
|
<input class="form-control me-2" type="search" placeholder="🔍 Buscar Archivo" aria-label="Search" id="searchInput">
|
|
<button class="btn btn-search" type="submit">
|
|
<i class="fas fa-search"></i>
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</nav>
|
|
|
|
<div class="container main-container">
|
|
<div class="row">
|
|
<div class="col-lg-12">
|
|
<div class="upload-card">
|
|
<h1 class="upload-title">
|
|
<i class="fas fa-cloud-upload-alt me-3"></i>SIGMA Cloud
|
|
</h1>
|
|
<form id="uploadForm" class="d-flex" method="POST" action="/upload" enctype="multipart/form-data">
|
|
<div class="input-group">
|
|
<input type="file" name="file_toUpload" class="form-control file-input" id="fileInput" />
|
|
<input type="submit" class="btn btn-upload" value="📤 SUBIR ARCHIVO" />
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-12">
|
|
<div class="files-card">
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<table class="table table-custom">
|
|
<thead>
|
|
<tr>
|
|
<th><i class="fas fa-hashtag me-2"></i>ID</th>
|
|
<th><i class="fas fa-file me-2"></i>Nombre</th>
|
|
<th><i class="fas fa-calendar me-2"></i>Fecha</th>
|
|
<th><i class="fas fa-cogs me-2"></i>Acción</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="filesTableBody"> <% for (i in data) { %>
|
|
<tr>
|
|
<td>
|
|
<span class="badge bg-primary rounded-pill">
|
|
<%= data[i].indice %>
|
|
</span>
|
|
</td>
|
|
<td>
|
|
<span class="file-name">
|
|
<i class="fas fa-file-alt me-2"></i>
|
|
<%= data[i].archivo %>
|
|
</span>
|
|
</td>
|
|
<td>
|
|
<span class="text-muted">
|
|
<i class="fas fa-clock me-1"></i>
|
|
fecha
|
|
</span>
|
|
</td>
|
|
<td>
|
|
<button type="button" class="btn-action" onclick="modal('<%= data[i].archivo %>')" title="Ver archivo">
|
|
<i class="fas fa-play"></i>
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
<% } %>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal fade" tabindex="-1" id="myModal">
|
|
<div class="modal-dialog modal-lg" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="titulo">Archivo</h5>
|
|
<button type="button" class="btn-close btn-close-white" data-dismiss="modal" aria-label="Cerrar">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div id="data" class="text-center">
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button class="btn" type="button" title="Eliminar">
|
|
<i class="fas fa-trash"></i>
|
|
</button>
|
|
<button class="btn" type="button" title="Editar">
|
|
<i class="fas fa-edit"></i>
|
|
</button>
|
|
<button class="btn" type="button" title="Compartir">
|
|
<i class="fas fa-share-nodes"></i>
|
|
</button>
|
|
<button class="btn" type="button" data-dismiss="modal">
|
|
<i class="fas fa-check me-2"></i>Aceptar
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal fade" tabindex="-1" id="messageModal">
|
|
<div class="modal-dialog" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="modalTitleMessage"></h5>
|
|
<button type="button" class="btn-close" data-dismiss="modal" aria-label="Cerrar">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p id="modalBodyMessage"></p>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-dismiss="modal" id="modalCloseButton">Cerrar</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
|
|
</html> |