Sincronizacion similar a SIGMAC. creando apis
This commit is contained in:
Pablinux
@@ -1,184 +1,238 @@
|
||||
<!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">
|
||||
<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">
|
||||
|
||||
<link href="./css/tipografias.css" rel="stylesheet" type="text/css"/>
|
||||
<link href="./css/cloud.css" rel="stylesheet" type="text/css"/>
|
||||
<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">
|
||||
|
||||
<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>
|
||||
<link href="./css/tipografias.css" rel="stylesheet" type="text/css" />
|
||||
<link href="./css/cloud.css" rel="stylesheet" type="text/css" />
|
||||
|
||||
<script type="text/javascript">
|
||||
function modal(url){
|
||||
var array = url.split(".");
|
||||
var tipo = array.pop();
|
||||
if(modo_img(tipo)){
|
||||
//$("#img").attr("src","files/"+url);
|
||||
document.getElementById("data").innerHTML = `<img class="img-fluid rounded" src="files/${url}">`;
|
||||
}else if(modo_video(tipo)){
|
||||
//var alto = window.innerHeight;
|
||||
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;
|
||||
}
|
||||
//console.log("Ancho Original: "+anch+", Alto Original: "+alto);
|
||||
//console.log("Ancho -10%: "+(anch-(anch * porc/100))+", Alto: "+alto);
|
||||
var ctrl_video = `
|
||||
<video id="rep-video" width="${anch-(anch * porc/100)}" controls preload="auto">
|
||||
<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();
|
||||
if (modo_img(tipo)) {
|
||||
//$("#img").attr("src","files/"+url);
|
||||
document.getElementById("data").innerHTML = `<img class="img-fluid rounded" src="files/${url}">`;
|
||||
} else if (modo_video(tipo)) {
|
||||
//var alto = window.innerHeight;
|
||||
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;
|
||||
}
|
||||
//console.log("Ancho Original: "+anch+", Alto Original: "+alto);
|
||||
//console.log("Ancho -10%: "+(anch-(anch * porc/100))+", Alto: "+alto);
|
||||
var ctrl_video = `
|
||||
<video id="rep-video" width="${anch - (anch * porc / 100)}" controls preload="auto">
|
||||
<source src="files/${url}" type="video/${tipo}">
|
||||
</video>`;
|
||||
document.getElementById("data").innerHTML = ctrl_video;
|
||||
}else if(modo_music(tipo)){
|
||||
var ctrl_audio = `<div class="text-center "><img src="img/Music-icon.png">
|
||||
document.getElementById("data").innerHTML = ctrl_video;
|
||||
} else if (modo_music(tipo)) {
|
||||
var ctrl_audio = `<div class="text-center "><img src="img/Music-icon.png">
|
||||
<video controls preload="auto" id="ctrl_audio">
|
||||
<source src="files/${url}" type="audio/${tipo}">
|
||||
</video></div>`;
|
||||
document.getElementById("data").innerHTML = ctrl_audio;
|
||||
}else{
|
||||
document.getElementById("data").innerHTML = `<img class="img-fluid rounded" src="img/desc256.png">`;
|
||||
}
|
||||
document.getElementById("titulo").innerHTML = `Descargar: <a href="files/${url}">${url}</a>`;
|
||||
$("#myModal").modal({backdrop: true});
|
||||
document.getElementById("data").innerHTML = ctrl_audio;
|
||||
} else {
|
||||
document.getElementById("data").innerHTML = `<img class="img-fluid rounded" src="img/desc256.png">`;
|
||||
}
|
||||
document.getElementById("titulo").innerHTML = `Descargar: <a href="files/${url}">${url}</a>`;
|
||||
$("#myModal").modal({ backdrop: true });
|
||||
}
|
||||
|
||||
function modo_img(file){
|
||||
var tipoImg = ["jpg","jpeg","png"];
|
||||
var std = false;
|
||||
tipoImg.forEach((item, i) => {
|
||||
if(file==item){
|
||||
console.log(item);
|
||||
std = true;
|
||||
}
|
||||
});
|
||||
return std;
|
||||
}
|
||||
|
||||
function modo_video(file){
|
||||
var tipoImg = ["mp4","mpg","webm"];
|
||||
var std = false;
|
||||
tipoImg.forEach((item, i) => {
|
||||
function modo_img(file) {
|
||||
var tipoImg = ["jpg", "jpeg", "png"];
|
||||
var std = false;
|
||||
tipoImg.forEach((item, i) => {
|
||||
if (file == item) {
|
||||
console.log(item);
|
||||
if(file==item){
|
||||
//console.log(item);
|
||||
std = true;
|
||||
}
|
||||
});
|
||||
return std;
|
||||
}
|
||||
function modo_music(file){
|
||||
var tipoImg = ["mp3","acc","wav"];
|
||||
var std = false;
|
||||
tipoImg.forEach((item, i) => {
|
||||
if(file==item){
|
||||
console.log(item);
|
||||
std = true;
|
||||
}
|
||||
});
|
||||
return std;
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<!-- ENCABEZADO O MENU --->
|
||||
<nav class="navbar navbar-expand navbar-dark bg-dark">
|
||||
<div class="container-fluid">
|
||||
<a class="navbar-brand" href="#">
|
||||
<img src="img/favicon_sigma/android-chrome-192x192.png" alt="" width="36" height="36"></a>
|
||||
<form class="d-flex">
|
||||
<input class="form-control me-2" type="search" placeholder="Buscar Archivo" aria-label="Search">
|
||||
<button class="btn btn-outline-success" type="submit">Buscar</button>
|
||||
std = true;
|
||||
}
|
||||
});
|
||||
return std;
|
||||
}
|
||||
|
||||
function modo_video(file) {
|
||||
var tipoImg = ["mp4", "mpg", "webm"];
|
||||
var std = false;
|
||||
tipoImg.forEach((item, i) => {
|
||||
console.log(item);
|
||||
if (file == item) {
|
||||
//console.log(item);
|
||||
std = true;
|
||||
}
|
||||
});
|
||||
return std;
|
||||
}
|
||||
function modo_music(file) {
|
||||
var tipoImg = ["mp3", "acc", "wav"];
|
||||
var std = false;
|
||||
tipoImg.forEach((item, i) => {
|
||||
if (file == item) {
|
||||
console.log(item);
|
||||
std = true;
|
||||
}
|
||||
});
|
||||
return std;
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- ENCABEZADO O MENU --->
|
||||
<nav class="navbar navbar-expand navbar-dark bg-dark">
|
||||
<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="" width="36" height="36">
|
||||
</a>
|
||||
<div class="dropdown-menu" aria-labelledby="dropdownMenu2">
|
||||
<ul>
|
||||
<li class="user-header">
|
||||
<img src="img/usuario.jpeg" class="img-circle" alt="User Image">
|
||||
<p>
|
||||
ID# <span id="usr_id">8</span> -
|
||||
Usuario: <span id="usr_nom">PABLO FARIAS</span><br>
|
||||
<small>Miembro desde: <span id="usr_reg">2022-02-18 23:39:00</span></small>
|
||||
</p>
|
||||
<li class="user-body">
|
||||
<div class="row">
|
||||
<div class="col-xs-4 text-center">
|
||||
<a href="#">Seguidores</a>
|
||||
</div>
|
||||
<div class="col-xs-4 text-center">
|
||||
<a href="#">UID: 64b06b022c7b9</a>
|
||||
</div>
|
||||
<div class="col-xs-4 text-center">
|
||||
<a href="#">Amigos</a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.row -->
|
||||
</li>
|
||||
<li class="user-footer">
|
||||
<div class="pull-left">
|
||||
<a href="#" class="btn btn-default btn-flat">Perfil</a>
|
||||
</div>
|
||||
<div class="pull-right">
|
||||
<a href="../cloud" class="btn btn-default btn-flat">Cerrar Session</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form class="d-flex">
|
||||
<input class="form-control me-2" type="search" placeholder="Buscar Archivo" aria-label="Search">
|
||||
<button class="btn btn-outline-success" type="submit">Buscar</button>
|
||||
</form>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- formulario para subir archivos --->
|
||||
<div class="container">
|
||||
<div class="row upload">
|
||||
<div class="col-lg mt-2">
|
||||
<label for="basic-url" class="form-label info">SIGMA Cloud</label>
|
||||
<form class="d-flex" method="POST" action="/upload" enctype="multipart/form-data">
|
||||
<div class="input-group">
|
||||
<input type="file" name="file_toUpload" class="form-control" />
|
||||
<input type="submit" class="btn btn-outline-secondary" />
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- formulario para subir archivos --->
|
||||
<div class="container">
|
||||
<div class="row upload">
|
||||
<div class="col-lg mt-2">
|
||||
<label for="basic-url" class="form-label info">SIGMA Cloud</label>
|
||||
<form class="d-flex" method="POST" action="/upload" enctype="multipart/form-data">
|
||||
<div class="input-group">
|
||||
<input type="file" name="file_toUpload" class="form-control"/>
|
||||
<input type="submit" class="btn btn-outline-secondary"/>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<!-- RENDER formulario para subir archivos --->
|
||||
<div class="col-lg mt-2 files">
|
||||
<div class="row">
|
||||
<table class="table table-dark">
|
||||
<!-- RENDER formulario para subir archivos --->
|
||||
<div class="col-lg mt-2 files">
|
||||
<div class="row">
|
||||
<table class="table table-dark">
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>Nombre</th>
|
||||
<th>Fecha</th>
|
||||
<th>Accion</th>
|
||||
</tr>
|
||||
<% for (i in data) { %>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>Nombre</th>
|
||||
<th>Fecha</th>
|
||||
<th>Accion</th>
|
||||
<td><span>
|
||||
<%= data[i].indice%>
|
||||
</span></td>
|
||||
<td>
|
||||
<!--a href="<%= data[i].link %>"><%= data[i].archivo %></a-->
|
||||
<span>
|
||||
<%= data[i].archivo %>
|
||||
</span>
|
||||
</td>
|
||||
<td>fecha</td>
|
||||
<td>
|
||||
<button type="button" name="button" onclick="modal('<%= data[i].archivo %>')">
|
||||
<i class="fas fa-play"></i>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<% for (i in data) { %>
|
||||
<tr>
|
||||
<td><span><%= data[i].indice%> </span></td>
|
||||
<td>
|
||||
<!--a href="<%= data[i].link %>"><%= data[i].archivo %></a-->
|
||||
<span><%= data[i].archivo %></span>
|
||||
</td>
|
||||
<td>fecha</td>
|
||||
<td>
|
||||
<button type="button" name="button" onclick="modal('<%= data[i].archivo %>')">
|
||||
<i class="fas fa-play"></i>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<% } %>
|
||||
</table>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- EDITAR DATOS Y VISUALIZAR archivos --->
|
||||
<div class="modal fade" tabindex="-1" id="myModal">
|
||||
<div class="modal-dialog modal-lg" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<div id="titulo">URL</div>
|
||||
<button class="close" data-dismiss="modal" aria-label="cerar">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div id="data">
|
||||
<!--img class="img-fluid rounded" id="img" src="" alt=""-->
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="btn" type="button">
|
||||
<i data-fa-symbol="delete" class="fas fa-trash fa-fw"></i>
|
||||
</button>
|
||||
<button class="btn" type="button">
|
||||
<i data-fa-symbol="edit" class="fas fa-pencil fa-fw"></i>
|
||||
</button>
|
||||
<button class="btn" type="button">
|
||||
<i data-fa-symbol="compartir" class="fa-solid fa-share-nodes"></i>
|
||||
</button>
|
||||
<button class="btn btn-warnigb" type="button" data-dismiss="modal"> Aceptar</button>
|
||||
</div>
|
||||
<div class="modal-dialog modal-lg" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<div id="titulo">URL</div>
|
||||
<button class="close" data-dismiss="modal" aria-label="cerar">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div id="data">
|
||||
<!--img class="img-fluid rounded" id="img" src="" alt=""-->
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="btn" type="button">
|
||||
<i data-fa-symbol="delete" class="fas fa-trash fa-fw"></i>
|
||||
</button>
|
||||
<button class="btn" type="button">
|
||||
<i data-fa-symbol="edit" class="fas fa-pencil fa-fw"></i>
|
||||
</button>
|
||||
<button class="btn" type="button">
|
||||
<i data-fa-symbol="compartir" class="fa-solid fa-share-nodes"></i>
|
||||
</button>
|
||||
<button class="btn btn-warnigb" type="button" data-dismiss="modal"> Aceptar</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user