diff --git a/.DS_Store b/.DS_Store index b64aba4..c9c43e3 100644 Binary files a/.DS_Store and b/.DS_Store differ diff --git a/index.js b/index.js index 222543b..13b8186 100644 --- a/index.js +++ b/index.js @@ -2,6 +2,7 @@ const express = require('express'); const app = express(); const mysql = require('mysql'); const path = require('path'); +const bodyParser = require('body-parser'); const port = process.env.PORT || 3000; @@ -21,9 +22,10 @@ app.set('view engine', 'ejs'); app.set('views', path.join(__dirname, 'src/views')); app.use(express.static(path.join(__dirname, 'src'))); +app.use(bodyParser.json()); app.get("/", (req, res) => { - res.sendFile(path.join(__dirname, 'src', 'index.html')); + res.sendFile(path.join(__dirname, 'src/index.html')); }); app.get("/seguimiento", (req, res) => { @@ -34,8 +36,21 @@ app.get("/seguimiento", (req, res) => { }); }); -app.get("/empleadoTest", (req, res) => { - res.sendFile(path.join(__dirname, 'src', 'empleadoTest.html')); +app.get("/colaborador", (req, res) => { + res.sendFile(path.join(__dirname, 'src/colaborador.html')); +}); + +app.post('/actualizar_valor', (req, res) => { + const nuevoValor = req.body.valor; + const query = 'UPDATE Datos SET valor = ? WHERE id = ?'; + db.query(query, [nuevoValor, '463912'], (err, result) => { + if (err) { + console.error('Error al actualizar el valor:', err); + res.status(500).send('Error al actualizar el valor'); + return; + } + res.send('Valor actualizado correctamente'); + }); }); app.listen(port, () => { diff --git a/src/.DS_Store b/src/.DS_Store index 239a2a4..ebb5f9b 100644 Binary files a/src/.DS_Store and b/src/.DS_Store differ diff --git a/src/empleadoTest.html b/src/colaborador.html similarity index 64% rename from src/empleadoTest.html rename to src/colaborador.html index 0953314..e4007ad 100644 --- a/src/empleadoTest.html +++ b/src/colaborador.html @@ -11,8 +11,6 @@
- -
@@ -36,33 +34,9 @@ .then(response => response.text()) .then(data => { alert(data); - actualizarCirculos(nuevoValor); }) .catch(error => console.error('Error:', error)); } - - function actualizarCirculos(valor) { - for (let i = 1; i <= 7; i++) { - const circulo = document.getElementById(`circulo${i}`); - if (i < valor) { - circulo.src = "./public/ellipse-22.svg"; // Verde - } else if (i === valor) { - circulo.src = "./public/ellipse-28.svg"; // Naranja - } else { - circulo.src = "./public/ellipse-29.svg"; // Gris - } - } - } - - // Aquí puedes inicializar el estado de los círculos según el valor actual de la base de datos - document.addEventListener('DOMContentLoaded', (event) => { - fetch('/obtener_valor') - .then(response => response.json()) - .then(data => { - actualizarCirculos(data.valor); - }) - .catch(error => console.error('Error:', error)); - }); diff --git a/src/public/bill.svg b/src/public/bill.svg index 08f15b8..5929c13 100644 --- a/src/public/bill.svg +++ b/src/public/bill.svg @@ -1 +1,12 @@ - \ No newline at end of file + + + + + + + \ No newline at end of file diff --git a/src/public/brush.svg b/src/public/brush.svg index ad38fc7..6c3e054 100644 --- a/src/public/brush.svg +++ b/src/public/brush.svg @@ -1 +1,12 @@ - \ No newline at end of file + + + + + + + \ No newline at end of file diff --git a/src/seguimiento.css b/src/seguimiento.css index e2a5c54..6d8975d 100644 --- a/src/seguimiento.css +++ b/src/seguimiento.css @@ -375,6 +375,7 @@ bottom: 20px; left: 28.65px; height: 225px; + top: 620px; } .progressgray-icon, .progressgreen-icon { @@ -410,7 +411,7 @@ left: -2px; border-top: 2px solid var(--color-lightseagreen); box-sizing: border-box; - height: 4px; + height: 40px; } .estado-del-pedido { position: absolute; @@ -547,14 +548,14 @@ .entregado-icon, .seguimiento4 { position: absolute; - top: calc(50% + 2px); + top: calc(50% + 50px); right: 126.8px; width: 28.1px; height: 29.4px; } .seguimiento4 { width: 97.07%; - top: calc(50% - 19.5px); + right: 1.47%; left: 1.47%; height: 183px; @@ -568,9 +569,9 @@ top: 50px; right: 0; left: -2px; - border-top: 2px solid var(--color-lightseagreen); - box-sizing: border-box; - height: 4px; + border: 2px solid var(--unnamed-color-38afa7); + border: 2px solid #38AFA7; + opacity: 1; } .imagespace, .main-image-icon { @@ -925,6 +926,7 @@ flex-direction: column; align-items: center; justify-content: center; + } } @@ -932,23 +934,133 @@ /* Add these new styles */ .etapas-container { display: flex; - justify-content: space-around; + justify-content: space-between; /* Opción para distribuir con mayor espacio posible entre ellos */ align-items: center; - margin: 20px 0; -} + margin: 40px 150px; + position: relative; + } .etapa { + display: flex; + flex-direction: column; /* Coloca los elementos uno debajo del otro */ + align-items: center; /* Centra los elementos en cada etapa */ text-align: center; + position: relative; + } .etapa .circulo { display: block; - margin: 0 auto; - width: 40px; - height: 40px; + margin: -10px 0px; + width: 50px; + height: 50px; + z-index: 3; + +} + +.textos-container { + display: flex; + left: -31px; + justify-content: space-evenly; /* Justifica los textos uniformemente */ + align-items: top ; + margin: 45px 10px; + position: relative; +} + +.texto { + text-align: center; /* Asegura que el texto esté centrado */ + margin-top: -60px; + margin-left: 90px; + position: relative; + font: normal normal medium 17px/20px Montserrat; + letter-spacing: 0px; + color: #707070; + opacity: 1; +} + +.texto:nth-child(2) { + left: -5px; +} +.texto:nth-child(3) { + left: -8px; +} +.texto:nth-child(4) { + left: -1px; +} +.texto:nth-child(5) { + left: 16px; +} +.texto:nth-child(6) { + left: 16px; +} +.texto:nth-child(7) { + left: 15px; } -.etapa .texto { - margin-top: 10px; +.etapa img { + position: absolute; + top: -20px; /* Ajusta este valor para bajar los íconos */ + left: 50%; + transform: translateX(-50%); + width: 30px; /* Ajusta el tamaño del ícono según sea necesario */ + height: 30px; + z-index: 4; /* Asegura que el ícono esté encima del círculo */ +} +/* Título del Estado del Pedido */ +.estado-pedido-titulo { + position: absolute; + margin-left: 20px; + margin-top: -150px; + text-align: left; + top: 50%; + font: normal normal normal 31px/41px Josefin Sans; + letter-spacing: 0px; + color: #414141; + opacity: 1; } +/* Línea de progreso */ +.linea-Segment { + position: absolute; + top: -10px; + left: 0; + right: 0; + border: 2px solid var(--unnamed-color-38afa7); + border: 2px solid #38AFA7; + opacity: 1; +} +.linea-base { + border: 3px solid #B2B2B2; + position: absolute; + top: 32px; + left: 150px; + width: 1000px; + height: 0px; + z-index: 0; + +} + + + +.linea-Proceso { + border: 3px solid #44AFA7; + position: absolute; + top: 50%; /* Ajusta la posición vertical según sea necesario */ + left: 0; + + z-index: 2; /* Asegura que la línea esté detrás de los círculos */ + transition: width 1s ease; /* Añade una transición suave */ + top: 32px; + left: 130px; +} + +.linea-naranja { + border: 3px solid #D8A379; + position: absolute; + top: 50%; /* Ajusta la posición vertical según sea necesario */ + left: 0; + z-index: 1; /* Asegura que la línea esté detrás de los círculos */ + transition: 1s ease; /* Añade una transición suave */ + top: 32px; + left: 130px; +} \ No newline at end of file diff --git a/src/views/seguimiento.ejs b/src/views/seguimiento.ejs index 16fe17d..bf7ec00 100644 --- a/src/views/seguimiento.ejs +++ b/src/views/seguimiento.ejs @@ -1,242 +1,223 @@ - + - - - - - + + + + +
- + -
- +
+ -
- -
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
COMPANY
-
-

Profile

-

About us

-

Contact

-

Address

-
-
RETURNS
-
-

FAQs

-

Size Guide

-

Contact us

-
-
-

Lorem ipsum dolor sit amet,

-

consetetur sadipscing elitr,

-

sed diam nonumy

-
-
Caribbean House Studio
-
-
-
-
- Dirección de Envio -
-

Nombre: Juan Quintana

-

Calle: Av. Siempre Viva 742

-

Ciudad: Springfield

-

Estado: IL

-

Código Postal: 62704

+
+
- -
-
- Tiempo Estimado - - - - - 2 -
- - - - - Días +
+
-
-
- Detalles de la Etapa Actual -
- El mueble ha sido empaquetado y enviado a la dirección indicada. - Se espera que llegue en los próximos días. -
- -
-
-
-
- <% for (let i = 1; i <= 7; i++) { %> -
- -

- <%= i === 1 ? 'Pedido Confirmado' : i === 2 ? 'Insumos Listos' : i === 3 ? 'Maquila en Proceso' : i === 4 ? 'Barniz' : i === 5 ? 'Armado' : i === 6 ? 'En Camino' : 'Entrega' %> -

-
- <% } %> -
-
-
-
-
- - -
- Información del pedido -
-

Mueble: Credenza

-

Material: Madera

-

Dimensiones: 180 x 90 x 40 cm

-

Acabado: Barnizado

-

Color: Natural

+
+
+
+
+
-
-
Credenza
-
ID de Envío:
-
12345678
-
-
-
- +
+
+
+
-
-
- +
COMPANY
+
+

Profile

+

About us

+

Contact

+

Address

-
-
- +
RETURNS
+
+

FAQs

+

Size Guide

+

Contact us

-
-
- +
+

Lorem ipsum dolor sit amet,

+

consetetur sadipscing elitr,

+

sed diam nonumy

-
-
-
-
-
-
- +
Caribbean House Studio
-
INICIO
-
CATÁLOGO
-
BLOG
-
- NUESTRA HISTORIA -
- SEGUIMIENTO - - - +
+
+
+ Dirección de Envio +
+

Nombre: Juan Quintana

+

Calle: Av. Siempre Viva 742

+

Ciudad: Springfield

+

Estado: IL

+

Código Postal: 62704

+
+ +
+
+ Tiempo Estimado + + + 2 +
+ + + Días +
+
+
+ Detalles de la Etapa Actual +
+ El mueble ha sido empaquetado y enviado a la dirección indicada. Se espera que llegue en los próximos días. +
+ +
+
+ +
+
Estado del Pedido
+
+
+ <% for (let i = 1; i <= 7; i++) { %> +
+ + +
+ <% } %> +
+
+
+
+
+ +
+
Pedido
Confirmado
+
Insumos
Listos
+
Maquila
en Proceso
+
Barniz
+
Armado
+
En Camino
+
Entrega
+
+ +
+
+
+
+
+ -
- - -
1
- -
+
+
+
+ +
+
INICIO
+
CATÁLOGO
+
BLOG
+
NUESTRA HISTORIA
+ SEGUIMIENTO + + + + +
1
+ +
- + +