diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 0000000000..185de73b3f --- /dev/null +++ b/package-lock.json @@ -0,0 +1,6 @@ +{ + "name": "ecomersColabotativo-FacaundoGabrielBruno", + "lockfileVersion": 3, + "requires": true, + "packages": {} +} diff --git a/website/assets/css/brunoStyles.css b/website/assets/css/brunoStyles.css new file mode 100644 index 0000000000..45e92cc607 --- /dev/null +++ b/website/assets/css/brunoStyles.css @@ -0,0 +1,19 @@ +.imagen-carrito{ + width: 45px; + height: 45px; + object-fit: cover" +} + +.listado-pago{ + min-height: 220px; +} + +#lista-resumen-pago { + max-height: 150px; + overflow-y: auto; +} + +.imagen-card { + height: 300px; + object-fit: cover; +} \ No newline at end of file diff --git a/website/assets/css/style.css b/website/assets/css/style.css index 0c6b9d5539..17a57587bf 100644 --- a/website/assets/css/style.css +++ b/website/assets/css/style.css @@ -1,3 +1,4 @@ body{ background: #BDBDBD; -} \ No newline at end of file +} + diff --git a/website/assets/img/americano.jpeg b/website/assets/img/americano.jpeg new file mode 100644 index 0000000000..e9546510ef Binary files /dev/null and b/website/assets/img/americano.jpeg differ diff --git a/website/assets/img/brownie.jpeg b/website/assets/img/brownie.jpeg new file mode 100644 index 0000000000..4c3fbfdb3a Binary files /dev/null and b/website/assets/img/brownie.jpeg differ diff --git a/website/assets/img/capuchino.avif b/website/assets/img/capuchino.avif new file mode 100644 index 0000000000..0ec08adcd2 Binary files /dev/null and b/website/assets/img/capuchino.avif differ diff --git a/website/assets/img/cheese_cake.jpg b/website/assets/img/cheese_cake.jpg new file mode 100644 index 0000000000..ea8b934ad7 Binary files /dev/null and b/website/assets/img/cheese_cake.jpg differ diff --git a/website/assets/img/cinnamon_roll.jpg b/website/assets/img/cinnamon_roll.jpg new file mode 100644 index 0000000000..92dc8a0506 Binary files /dev/null and b/website/assets/img/cinnamon_roll.jpg differ diff --git a/website/assets/img/cold_brew.jpg b/website/assets/img/cold_brew.jpg new file mode 100644 index 0000000000..de67894c7a Binary files /dev/null and b/website/assets/img/cold_brew.jpg differ diff --git a/website/assets/img/croissant.jpg b/website/assets/img/croissant.jpg new file mode 100644 index 0000000000..7307e2b884 Binary files /dev/null and b/website/assets/img/croissant.jpg differ diff --git a/website/assets/img/cupcake_blueberry.jpg b/website/assets/img/cupcake_blueberry.jpg new file mode 100644 index 0000000000..89668baed1 Binary files /dev/null and b/website/assets/img/cupcake_blueberry.jpg differ diff --git a/website/assets/img/latte.jpg b/website/assets/img/latte.jpg new file mode 100644 index 0000000000..2583842c50 Binary files /dev/null and b/website/assets/img/latte.jpg differ diff --git a/website/assets/img/latte_vainilla.jpeg b/website/assets/img/latte_vainilla.jpeg new file mode 100644 index 0000000000..a5fb95b8df Binary files /dev/null and b/website/assets/img/latte_vainilla.jpeg differ diff --git a/website/assets/img/lemon_pie.jpg b/website/assets/img/lemon_pie.jpg new file mode 100644 index 0000000000..9eb4202f45 Binary files /dev/null and b/website/assets/img/lemon_pie.jpg differ diff --git a/website/assets/img/moccha.jpeg b/website/assets/img/moccha.jpeg new file mode 100644 index 0000000000..f0a83d2788 Binary files /dev/null and b/website/assets/img/moccha.jpeg differ diff --git a/website/assets/js/fix.js b/website/assets/js/fix.js index 289aef3004..ab5ee73c05 100644 --- a/website/assets/js/fix.js +++ b/website/assets/js/fix.js @@ -20,53 +20,53 @@ for (var i = 0, len = links.length; i < len; i++) { // Set the offset when entering page with hash present in the url window.setTimeout(offsetAnchor, 0); -/* -NOW WE NEED TO FIX THE NAVBAR TO MAKE IT WORK ON MOBILE WITHOUT JQUERY - */ - - -// Navbar and dropdowns -var toggle = document.getElementsByClassName('navbar-toggle')[0], - collapse = document.getElementsByClassName('navbar-collapse')[0], - dropdowns = document.getElementsByClassName('dropdown');; - -// Toggle if navbar menu is open or closed -function toggleMenu() { - collapse.classList.toggle('collapse'); - collapse.classList.toggle('in'); -} - -// Close all dropdown menus -function closeMenus() { - for (var j = 0; j < dropdowns.length; j++) { - dropdowns[j].getElementsByClassName('dropdown-toggle')[0].classList.remove('dropdown-open'); - dropdowns[j].classList.remove('open'); - } -} - -// Add click handling to dropdowns -for (var i = 0; i < dropdowns.length; i++) { - dropdowns[i].addEventListener('click', function() { - if (document.body.clientWidth < 768) { - var open = this.classList.contains('open'); - closeMenus(); - if (!open) { - this.getElementsByClassName('dropdown-toggle')[0].classList.toggle('dropdown-open'); - this.classList.toggle('open'); - } - } - }); -} - -// Close dropdowns when screen becomes big enough to switch to open by hover -function closeMenusOnResize() { - if (document.body.clientWidth >= 768) { - closeMenus(); - collapse.classList.add('collapse'); - collapse.classList.remove('in'); - } -} - -// Event listeners -window.addEventListener('resize', closeMenusOnResize, false); -toggle.addEventListener('click', toggleMenu, false); \ No newline at end of file +///* +//NOW WE NEED TO FIX THE NAVBAR TO MAKE IT WORK ON MOBILE WITHOUT JQUERY +// */ +// +// +//// Navbar and dropdowns +//var toggle = document.getElementsByClassName('navbar-toggle')[0], +// collapse = document.getElementsByClassName('navbar-collapse')[0], +// dropdowns = document.getElementsByClassName('dropdown');; +// +//// Toggle if navbar menu is open or closed +//function toggleMenu() { +// collapse.classList.toggle('collapse'); +// collapse.classList.toggle('in'); +//} +// +//// Close all dropdown menus +//function closeMenus() { +// for (var j = 0; j < dropdowns.length; j++) { +// dropdowns[j].getElementsByClassName('dropdown-toggle')[0].classList.remove('dropdown-open'); +// dropdowns[j].classList.remove('open'); +// } +//} +// +//// Add click handling to dropdowns +//for (var i = 0; i < dropdowns.length; i++) { +// dropdowns[i].addEventListener('click', function() { +// if (document.body.clientWidth < 768) { +// var open = this.classList.contains('open'); +// closeMenus(); +// if (!open) { +// this.getElementsByClassName('dropdown-toggle')[0].classList.toggle('dropdown-open'); +// this.classList.toggle('open'); +// } +// } +// }); +//} +// +//// Close dropdowns when screen becomes big enough to switch to open by hover +//function closeMenusOnResize() { +// if (document.body.clientWidth >= 768) { +// closeMenus(); +// collapse.classList.add('collapse'); +// collapse.classList.remove('in'); +// } +//} +// +//// Event listeners +//window.addEventListener('resize', closeMenusOnResize, false); +//toggle.addEventListener('click', toggleMenu, false); \ No newline at end of file diff --git a/website/assets/js/portfolioBruno.js b/website/assets/js/portfolioBruno.js new file mode 100644 index 0000000000..52775a8b1c --- /dev/null +++ b/website/assets/js/portfolioBruno.js @@ -0,0 +1,213 @@ +const cafes = [ + { id: 1, nombre: "Café Mocha", precio: 4.50, imagen: "/website/assets/img/moccha.jpeg" }, + { id: 2, nombre: "Café Americano", precio: 3.00, imagen: "/website/assets/img/americano.jpeg" }, + { id: 3, nombre: "Café con Leche", precio: 3.50, imagen: "/website/assets/img/latte.jpg" }, + { id: 4, nombre: "Cappuccino", precio: 4.00, imagen: "/website/assets/img/capuchino.avif" }, + { id: 5, nombre: "Latte Vainilla", precio: 4.80, imagen: "/website/assets/img/latte_vainilla.jpeg"}, + { id: 6, nombre: "Cold Brew", precio: 5.00, imagen: "/website/assets/img/cold_brew.jpg"}, +] + +const pasteleria = [ + { id: 7, nombre: "Croissant de Mantequilla", precio: 2.50, imagen: "/website/assets/img/croissant.jpg"}, + { id: 8, nombre: "Tarta de Queso", precio: 3.80, imagen: "/website/assets/img/cheese_cake.jpg"}, + { id: 9, nombre: "Brownie de Chocolate", precio: 3.00, imagen: "/website/assets/img/brownie.jpeg"}, + { id: 10, nombre: "Muffin de Arándanos", precio: 2.80, imagen: "/website/assets/img/cupcake_blueberry.jpg"}, + { id: 11, nombre: "Cinnamon Roll", precio: 3.50, imagen: "/website/assets/img/cinnamon_roll.jpg"}, + { id: 12, nombre: "Tarta de Limón", precio: 4.00, imagen: "/website/assets/img/lemon_pie.jpg"}, +]; + + +function renderizarProductos(lista, contenedorId) { + const contenedor = document.getElementById(contenedorId); + contenedor.innerHTML = ""; + + lista.forEach(producto => { + const col = document.createElement("div"); + col.classList.add("col"); + col.innerHTML = ` +
+ +
+
${producto.nombre}
+

Freshly made for you.

+
+ $${producto.precio.toFixed(2)} + +
+
+
+ `; + + const boton = col.querySelector(".btn-agregar"); + boton.addEventListener("click", () => { + agregarAlCarrito(producto); + }); + + contenedor.appendChild(col); + }); +} + +let carrito = []; + +function agregarAlCarrito(producto) { + let estaEnCarrito = carrito.find(p => p.id === producto.id); + + if (estaEnCarrito) { + estaEnCarrito.cantidad++; + estaEnCarrito.total = estaEnCarrito.precio * estaEnCarrito.cantidad; + } else { + carrito.push({ ...producto, cantidad: 1, total: producto.precio }); + } + + const toastLiveExample = document.getElementById("toastAgregar"); + const toast = new bootstrap.Toast(toastLiveExample); + toast.show(); + + console.log(carrito); + renderizarCarrito(); +} + +function renderizarCarrito() { + const contenedorCarrito = document.getElementById("lista-carrito"); + const totalElemento = document.getElementById("precio-total"); + + contenedorCarrito.innerHTML = ""; + let totalGeneral = 0; + + if (carrito.length === 0) { + contenedorCarrito.innerHTML = '

Tu carrito está vacío

'; + totalElemento.textContent = "0.00"; + return; + } + + carrito.forEach(item => { + totalGeneral += item.total; + + const fila = document.createElement("div"); + fila.classList.add("mb-3"); + fila.innerHTML = ` +
+
+ +

${item.nombre}

+
+ + ${item.cantidad} + +
+

$${item.precio.toFixed(2)}

+
+ +
+

$ ${item.total.toFixed(2)}

+ +
+
+ `; + + const botonRestar = fila.querySelector(".btn-restar"); + botonRestar.addEventListener("click", () => { + if (item.cantidad > 1) { + item.cantidad--; + item.total = item.cantidad * item.precio; + renderizarCarrito(); + } + renderizarCarrito(); + }); + + + const botonSumar = fila.querySelector(".btn-sumar"); + botonSumar.addEventListener("click", () => { + item.cantidad++ + item.total = item.cantidad * item.precio; + renderizarCarrito(); + }); + + + const botonEliminar = fila.querySelector(".btn-eliminar"); + botonEliminar.addEventListener("click", () => { + eliminarDelCarrito(item.id); + }); + + contenedorCarrito.appendChild(fila); + }); + + totalElemento.textContent = totalGeneral.toFixed(2); +} + + +function eliminarDelCarrito(id) { + carrito = carrito.filter(item => item.id !== id); + renderizarCarrito(); +} + +document.addEventListener("DOMContentLoaded", () => { + const intervalo = setInterval(() => { + const listaCafes = document.getElementById("lista-cafes"); + const modalPago = document.getElementById("modalPago"); + + if (listaCafes && modalPago) { + clearInterval(intervalo); + + renderizarProductos(cafes, "lista-cafes"); + renderizarProductos(pasteleria, "lista-pasteleria"); + renderizarCarrito(); + + modalPago.addEventListener("show.bs.modal", () => { + const listaResumen = document.getElementById("lista-resumen-pago"); + const totalCarrito = document.getElementById("precio-total").innerText; + const totalPago = document.getElementById("precio-total-pago"); + + totalPago.innerText = totalCarrito; + listaResumen.innerHTML = ""; + + carrito.forEach(item => { + const div = document.createElement("div"); + div.className = "d-flex justify-content-between small mb-2"; + div.innerHTML = ` + ${item.cantidad}x ${item.nombre} + $${item.total.toFixed(2)} + `; + listaResumen.appendChild(div); + }); + }); + + document.getElementById("btn-finalizar").addEventListener("click", function() { + + const nombre = document.getElementById("input-nombre").value; + const numero = document.getElementById("input-numero").value; + const vencimiento = document.getElementById("input-vencimiento").value; + const cvv = document.getElementById("input-cvv").value; + + if (!nombre || !numero || !vencimiento || !cvv) { + document.getElementById("error-pago").classList.remove("d-none"); + return; + } + + document.getElementById("error-pago").classList.add("d-none"); + + carrito = []; + renderizarCarrito(); + + const modalPagoInstancia = bootstrap.Modal.getInstance(document.getElementById("modalPago")); + modalPagoInstancia.hide(); + + document.getElementById("modalPago").addEventListener("hidden.bs.modal", () => { + const modalCarritoInstancia = bootstrap.Modal.getInstance(document.getElementById("modalCarrito")); + if (modalCarritoInstancia) modalCarritoInstancia.hide(); + }, { once: true }); + + document.getElementById("modalCarrito").addEventListener("hidden.bs.modal", () => { + const toast = new bootstrap.Toast(document.getElementById("toastExito")); + toast.show(); + }, { once: true }); +}); + + } + }, 100); +}); + diff --git a/website/index.html b/website/index.html index 6173ddb526..568327994a 100644 --- a/website/index.html +++ b/website/index.html @@ -8,10 +8,12 @@ - + - + + + @@ -34,12 +36,12 @@ + - - - + + diff --git a/website/templates/portfolio.html b/website/templates/portfolio.html index 218c186ffa..73b25ce0a4 100644 --- a/website/templates/portfolio.html +++ b/website/templates/portfolio.html @@ -1,2 +1,147 @@ -

Hello, I'm the portfolio.html

\ No newline at end of file + + +
+
+

Nuestros Cafés

+
+
+ +
+

Nuestra Pastelería

+
+
+
+ + + + + +
+ + + +
+ + +