natalia.cancino
/
FrontPastel
1
0
Fork 0
Code Issues Pull Requests Packages Projects 1 Releases Wiki Activity

actualizacion Inicio

This commit is contained in:
Cesar.Gomez 2024-05-12 10:34:55 -06:00
parent e1a3409090
commit 0085f238be
21 changed files with 1430 additions and 719 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
frontend/package-lock.json generated
View File

@ -15,7 +15,9 @@
"react": "^18.2.0", "react": "^18.2.0",
"react-dom": "^18.2.0", "react-dom": "^18.2.0",
"react-icons": "^5.1.0", "react-icons": "^5.1.0",
"react-router-dom": "^6.23.0" "react-router-dom": "^6.23.0",
"sweetalert": "^2.1.2",
"sweetalert2": "^11.11.0"
}, },
"devDependencies": { "devDependencies": {
"@types/react": "^18.2.66", "@types/react": "^18.2.66",
@ -2412,6 +2414,11 @@
"url": "https://github.com/sponsors/ljharb" "url": "https://github.com/sponsors/ljharb"
} }
}, },
"node_modules/es6-object-assign": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/es6-object-assign/-/es6-object-assign-1.1.0.tgz",
"integrity": "sha512-MEl9uirslVwqQU369iHNWZXsI8yaZYGg/D65aOgZkeyFJwHYSxilf7rQzXKI7DdDuBPrBXbfk3sl9hJhmd5AUw=="
},
"node_modules/esbuild": { "node_modules/esbuild": {
"version": "0.20.2", "version": "0.20.2",
"resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.20.2.tgz", "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.20.2.tgz",
@ -4094,6 +4101,11 @@
"node": ">= 0.8.0" "node": ">= 0.8.0"
} }
}, },
"node_modules/promise-polyfill": {
"version": "6.1.0",
"resolved": "https://registry.npmjs.org/promise-polyfill/-/promise-polyfill-6.1.0.tgz",
"integrity": "sha512-g0LWaH0gFsxovsU7R5LrrhHhWAWiHRnh1GPrhXnPgYsDkIqjRYUYSZEsej/wtleDrz5xVSIDbeKfidztp2XHFQ=="
},
"node_modules/prop-types": { "node_modules/prop-types": {
"version": "15.8.1", "version": "15.8.1",
"resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz", "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
@ -4650,6 +4662,24 @@
"url": "https://github.com/sponsors/ljharb" "url": "https://github.com/sponsors/ljharb"
} }
}, },
"node_modules/sweetalert": {
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/sweetalert/-/sweetalert-2.1.2.tgz",
"integrity": "sha512-iWx7X4anRBNDa/a+AdTmvAzQtkN1+s4j/JJRWlHpYE8Qimkohs8/XnFcWeYHH2lMA8LRCa5tj2d244If3S/hzA==",
"dependencies": {
"es6-object-assign": "^1.1.0",
"promise-polyfill": "^6.0.2"
}
},
"node_modules/sweetalert2": {
"version": "11.11.0",
"resolved": "https://registry.npmjs.org/sweetalert2/-/sweetalert2-11.11.0.tgz",
"integrity": "sha512-wKCTtoE6lQVDKaJ5FFq+znk/YykJmJlD8RnLZps8C7DyivctCoRlVeeOwnKfgwKS+QJYon7s++3dmNi3/am1tw==",
"funding": {
"type": "individual",
"url": "https://github.com/sponsors/limonte"
}
},
"node_modules/text-table": { "node_modules/text-table": {
"version": "0.2.0", "version": "0.2.0",
"resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz", "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",

4
frontend/package.json
View File

@ -17,7 +17,9 @@
"react": "^18.2.0", "react": "^18.2.0",
"react-dom": "^18.2.0", "react-dom": "^18.2.0",
"react-icons": "^5.1.0", "react-icons": "^5.1.0",
"react-router-dom": "^6.23.0" "react-router-dom": "^6.23.0",
"sweetalert": "^2.1.2",
"sweetalert2": "^11.11.0"
}, },
"devDependencies": { "devDependencies": {
"@types/react": "^18.2.66", "@types/react": "^18.2.66",

2
frontend/public/vite.svg
View File

@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" className="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.5 KiB

After

Width:  |  Height:  |  Size: 1.5 KiB

18
frontend/src/AppInicio.css
View File

@ -1150,3 +1150,21 @@ html {
text-align: left; text-align: left;
color:var(--primary-color) color:var(--primary-color)
} }
.enlace a {
font-weight: 500;
color: var(--texto-claro);
transition: 0.3s;
}
.enlace a:hover {
color: var(--color-primario);
}
.enlaceNombre{
margin-left: 600px;
}

347
frontend/src/AppInicio.jsx
View File

@ -1,4 +1,4 @@
import { useState } from 'react' import React, {useEffect, useState} from "react";
import reactLogo from './assets/react.svg' import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg' import viteLogo from '/vite.svg'
import './AppInicio.css' import './AppInicio.css'
@ -10,7 +10,7 @@ import { CiHeart } from "react-icons/ci";
import { FaRegEye } from "react-icons/fa"; import { FaRegEye } from "react-icons/fa";
import { CiShare2 } from "react-icons/ci"; import { CiShare2 } from "react-icons/ci";
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
import axios from 'axios';
import PastelEditado1 from "./assets/Edicion1.jpg"; import PastelEditado1 from "./assets/Edicion1.jpg";
import PastelEditado2 from "./assets/Edicion2.jpg"; import PastelEditado2 from "./assets/Edicion2.jpg";
import PastelEditado3 from "./assets/Edicion3.jpg"; import PastelEditado3 from "./assets/Edicion3.jpg";
@ -20,15 +20,28 @@ import PastelEditado6 from "./assets/Edicion6.jpg";
import PastelZanahoria from "./assets/Pastel-Zanahoria.jpg"; import PastelZanahoria from "./assets/Pastel-Zanahoria.jpg";
import MejoresPasteles from "./assets/MejoresPasteles.jpg"; import MejoresPasteles from "./assets/MejoresPasteles.jpg";
import PastelTematico from "./assets/pastel-tematico.jpg"; import PastelTematico from "./assets/pastel-tematico.jpg";
import Swal from 'sweetalert2'
//import PopupV from "/src/Popups/PopupLoginValido.jsx";
//import PopupIv from "/src/Popups/PopupLoginInvalido.jsx";
function App() { function App() {
const [count, setCount] = useState(0); const [count, setCount] = useState(0);
const navigate = useNavigate(); const navigate = useNavigate();
const [datosFormulario, setDatosFormulario] = useState(
{correo: '',
password: '',
nombre: ''
});
const redirectPersonalizarPastelArcoiris = () => { const redirectPersonalizarPastelArcoiris = () => {
// Redirige a la página del hotel cuando se hace clic en el botón
navigate("/PersonalizarPastel/PastelArcoiris"); navigate("/PersonalizarPastel/PastelArcoiris");
}; };
const redirectToLogin = () => {
navigate("/Login");
};
const redirectToPedidos = () => { const redirectToPedidos = () => {
navigate("/Pedidos"); navigate("/Pedidos");
@ -40,7 +53,7 @@ function App() {
}; };
const redirectInicio = () => { const redirectInicio = () => {
// Redirige a la página del hotel cuando se hace clic en el botón
navigate("/"); navigate("/");
}; };
@ -56,51 +69,116 @@ function App() {
navigate("/Pasteles/PastelChocolate") navigate("/Pasteles/PastelChocolate")
}; };
const mostrarAlertaLogOut = () => {
Swal.fire({
title: "Cerrar Sesión",
text: "¿Seguro que quieres cerrar sesión?",
icon: "warning",
showCancelButton: true, // Mostrar el botón de cancelar
confirmButtonColor: "#3085d6", // Color del botón de confirmar
cancelButtonColor: "#d33", // Color del botón de cancelar
confirmButtonText: "Sí", // Texto del botón de confirmar
cancelButtonText: "No", // Texto del botón de cancelar
}).then((result) => {
if (result.isConfirmed) {
Swal.fire({
text: "Sesión cerrada correctamente. Adiós " + nombreUsuario + "",
icon: "success",
});
cerrarSesion();
}
});
};
const [nombreUsuario, setNombreUsuario]=useState("");
const obtenerNombreUsuario = async () => {
try {
// Realizar la llamada al backend para obtener el nombre del usuario
const response = await axios.post('http://localhost:4567/frontend/obtenerUsuario', { datosFormulario });
setNombreUsuario(response.data.nombre);
console.log(nombreUsuario);
console.log("hola"+ datosFormulario.nombre);
} catch (error) {
// Manejar el error según tus necesidades
console.error("Error al obtener el nombre del usuario", error);
}
};
useEffect(() => {
// Llamar a la función al cargar la página
obtenerNombreUsuario();
}, []);
const cerrarSesion = async () => {
try {
// Realizar la llamada al backend para obtener el nombre del usuario
const response = await axios.post('http://localhost:4567/frontend/cerrarSesion', { datosFormulario });
setNombreUsuario(response.data.nombre);
console.log(nombreUsuario);
obtenerNombreUsuario();
//mostrarAlertaLogOut();
} catch (error) {
// Manejar el error según tus necesidades
console.error("Error al obtener el nombre del usuario", error);
}
};
return ( return (
<> <>
<body> <body>
<header> <header>
<div class="container-hero"> <div className="container-hero">
<div class="container hero"> <div className="container hero">
<div class="customer-support"> <div className="customer-support">
<RiCustomerService2Fill className="icono-cliente" /> <RiCustomerService2Fill className="icono-cliente" />
<div class="content-customer-support"> <div className="content-customer-support">
<span class="text">Soporte al cliente</span> <span className="text">Soporte al cliente</span>
<span class="number">123-456-7890</span> <span className="number">123-456-7890</span>
</div> </div>
</div> </div>
<div class="container-logo"> <div className="container-logo">
<i class="fa-solid fa-mug-hot"></i> <i className="fa-solid fa-mug-hot"></i>
<h1 class="logo"><a href="/">Pasteleria RAPI</a></h1> <h1 className="logo"><a href="/">Pasteleria RAPI</a></h1>
</div> </div>
<div class="container-user"> <div className="container-user">
<FaUser className="icono-User"/> <FaUser className="icono-User"/>
<div class="content-shopping-cart"> <div className="content-shopping-cart">
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="container-navbar"> <div className="container-navbar">
<nav class="navbar container"> <nav className="navbar container">
<i class="fa-solid fa-bars"></i> <i className="fa-solid fa-bars"></i>
<ul class="menu"> <ul className="menu">
<li><a href="#" onClick={redirectInicio}>Inicio</a></li> <li><a href="#" onClick={redirectInicio}>Inicio</a></li>
<li><a href="#" onClick={redirectToPasteles} >Pasteles</a></li> <li><a href="#" onClick={redirectToPasteles} >Pasteles</a></li>
<li><a href="#" onClick={redirectPersonalizarPastelArcoiris}>Personalizar Pastel</a></li> <li><a href="#" onClick={redirectPersonalizarPastelArcoiris}>Personalizar Pastel</a></li>
<li><a href="/Pedidos" onClick={redirectToPedidos}>Pedidos</a></li> <li><a href="/Pedidos" onClick={redirectToPedidos}>Pedidos</a></li>
<li><a href="#">Blog</a></li> <li><a href="#">Blog</a></li>
{nombreUsuario ? (
<>
<li className="enlaceNombre"><a href="#">{nombreUsuario}</a></li>
<li className="enlaceNombre2"><a href="#" onClick={mostrarAlertaLogOut}>Cerrar Sesión</a></li>
</>
) : (
<li className="enlaceNombre2"><a href="#" onClick={redirectToLogin}>Iniciar Sesión</a></li>
)
}
</ul> </ul>
<form class="search-form"> <form className="search-form">
</form> </form>
@ -108,27 +186,27 @@ function App() {
</div> </div>
</header> </header>
<section class="banner"> <section className="banner">
<div class="content-banner"> <div className="content-banner">
<p>Pastel Delicioso</p> <p>Pastel Delicioso</p>
<h2>100% Hecho <br />Por Nosotros</h2> <h2>100% Hecho <br />Por Nosotros</h2>
<a href="#">Comprar ahora</a> <a href="#">Comprar ahora</a>
</div> </div>
</section> </section>
<main class="main-content"> <main className="main-content">
<section class="container container-features"> <section className="container container-features">
</section> </section>
<section class="container top-categories"> <section className="container top-categories">
<h1 class="heading-1">Mejores Categorías</h1> <h1 className="heading-1">Mejores Categorías</h1>
<div class="container-categories"> <div className="container-categories">
<div class="card-category category-moca"> <div className="card-category category-moca">
<p>Pasteles Personalizados</p> <p>Pasteles Personalizados</p>
<span onClick={redirectPersonalizarPastelArcoiris}>Ver más</span> <span onClick={redirectPersonalizarPastelArcoiris}>Ver más</span>
</div> </div>
<div class="card-category category-expreso"> <div className="card-category category-expreso">
<p>Pasteles en linea </p> <p>Pasteles en linea </p>
<span onClick={redirectToPasteles}>Ver más</span> <span onClick={redirectToPasteles}>Ver más</span>
</div> </div>
@ -136,119 +214,119 @@ function App() {
</div> </div>
</section> </section>
<section class="container top-products"> <section className="container top-products">
<h1 class="heading-1">Mejores Productos</h1> <h1 className="heading-1">Mejores Productos</h1>
<div class="container-options"> <div className="container-options">
<span class="active">Destacados</span> <span className="active">Destacados</span>
</div> </div>
<div class="container-products"> <div className="container-products">
<div class="card-product"> <div className="card-product">
<div class="container-img"> <div className="container-img">
<img src={PastelEditado1} alt="Cafe Irish" /> <img src={PastelEditado1} alt="Cafe Irish" />
<span class="discount">-10%</span> <span className="discount">-10%</span>
<div class="button-group"> <div className="button-group">
</div> </div>
</div> </div>
<div class="content-card-product"> <div className="content-card-product">
<div class="stars"> <div className="stars">
<i class="fa-solid fa-star"></i> <i className="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i> <i className="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i> <i className="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i> <i className="fa-solid fa-star"></i>
<i class="fa-regular fa-star"></i> <i className="fa-regular fa-star"></i>
</div> </div>
<h3>Pastel Chocolate Blanco</h3> <h3>Pastel Chocolate Blanco</h3>
<span class="add-cart" onClick={redirectToChocolate}> <span className="add-cart" onClick={redirectToChocolate}>
<FaRegEye className="icono-eye"/> <FaRegEye className="icono-eye"/>
</span> </span>
<p class="price">$603<span>$670</span></p> <p className="price">$603<span>$670</span></p>
</div> </div>
</div> </div>
<div class="card-product"> <div className="card-product">
<div class="container-img"> <div className="container-img">
<img <img
src={PastelEditado2} src={PastelEditado2}
alt="Cafe incafe-ingles.jpg" alt="Cafe incafe-ingles.jpg"
/> />
<span class="discount">-30%</span> <span className="discount">-30%</span>
<div class="button-group"> <div className="button-group">
</div> </div>
</div> </div>
<div class="content-card-product"> <div className="content-card-product">
<div class="stars"> <div className="stars">
<i class="fa-solid fa-star"></i> <i className="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i> <i className="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i> <i className="fa-solid fa-star"></i>
<i class="fa-regular fa-star"></i> <i className="fa-regular fa-star"></i>
<i class="fa-regular fa-star"></i> <i className="fa-regular fa-star"></i>
</div> </div>
<h3>Pastel de Moka</h3> <h3>Pastel de Moka</h3>
<span class="add-cart" onClick={redirectToMoka}> <span className="add-cart" onClick={redirectToMoka}>
<FaRegEye className="icono-eye"/> <FaRegEye className="icono-eye"/>
</span> </span>
<p class="price">$560 <span>$800</span></p> <p className="price">$560 <span>$800</span></p>
</div> </div>
</div> </div>
<div class="card-product"> <div className="card-product">
<div class="container-img"> <div className="container-img">
<img <img
src={PastelEditado3} src={PastelEditado3}
alt="Cafe Australiano" alt="Cafe Australiano"
/> />
<div class="button-group"> <div className="button-group">
</div> </div>
</div> </div>
<div class="content-card-product"> <div className="content-card-product">
<div class="stars"> <div className="stars">
<i class="fa-solid fa-star"></i> <i className="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i> <i className="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i> <i className="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i> <i className="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i> <i className="fa-solid fa-star"></i>
</div> </div>
<h3>Pastel de Chocolate</h3> <h3>Pastel de Chocolate</h3>
<span class="add-cart" onClick={redirectToChocolate2}> <span className="add-cart" onClick={redirectToChocolate2}>
<FaRegEye className="icono-eye"/> <FaRegEye className="icono-eye"/>
</span> </span>
<p class="price">$350</p> <p className="price">$350</p>
</div> </div>
</div> </div>
<div class="card-product"> <div className="card-product">
<div class="container-img"> <div className="container-img">
<img src={PastelEditado4} alt="Moka" /> <img src={PastelEditado4} alt="Moka" />
<div class="button-group"> <div className="button-group">
</div> </div>
</div> </div>
<div class="content-card-product"> <div className="content-card-product">
<div class="stars"> <div className="stars">
<i class="fa-solid fa-star"></i> <i className="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i> <i className="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i> <i className="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i> <i className="fa-solid fa-star"></i>
<i class="fa-regular fa-star"></i> <i className="fa-regular fa-star"></i>
</div> </div>
<h3>Pastel de Zanahoria</h3> <h3>Pastel de Zanahoria</h3>
<span class="add-cart" > <span className="add-cart" >
<FaRegEye className="icono-eye"/> <FaRegEye className="icono-eye"/>
</span> </span>
<p class="price">$450</p> <p className="price">$450</p>
</div> </div>
</div> </div>
</div> </div>
@ -260,74 +338,74 @@ function App() {
<section class="container specials"> <section className="container specials">
<h1 class="heading-1"></h1> <h1 className="heading-1"></h1>
<div class="container-products"> <div className="container-products">
</div> </div>
</section> </section>
<section class="container blogs"> <section className="container blogs">
<h1 class="heading-1">Últimos Blogs</h1> <h1 className="heading-1">Últimos Blogs</h1>
<div class="container-blogs"> <div className="container-blogs">
<div class="card-blog"> <div className="card-blog">
<div class="container-img"> <div className="container-img">
<img src= {MejoresPasteles} alt="Imagen Blog 1" /> <img src= {MejoresPasteles} alt="Imagen Blog 1" />
<div class="button-group-blog"> <div className="button-group-blog">
<span> <span>
<i class="fa-solid fa-magnifying-glass"></i> <i className="fa-solid fa-magnifying-glass"></i>
</span> </span>
<span> <span>
<i class="fa-solid fa-link"></i> <i className="fa-solid fa-link"></i>
</span> </span>
</div> </div>
</div> </div>
<div class="content-blog"> <div className="content-blog">
<h3>Los 5 Mejores Pasteles que Debes Probar</h3> <h3>Los 5 Mejores Pasteles que Debes Probar</h3>
<span>27 de abril de 2024</span> <span>27 de abril de 2024</span>
<p> <p>
En este blog, quiero compartir contigo los cinco pasteles que considero absolutamente deliciosos y que definitivamente deberías probar al menos una vez en la vida. Estos pasteles son mis favoritos por diferentes razones, desde su sabor hasta su textura y presentación. ¡Espero que te animes a probarlos y que también se conviertan en tus favoritos! En este blog, quiero compartir contigo los cinco pasteles que considero absolutamente deliciosos y que definitivamente deberías probar al menos una vez en la vida. Estos pasteles son mis favoritos por diferentes razones, desde su sabor hasta su textura y presentación. ¡Espero que te animes a probarlos y que también se conviertan en tus favoritos!
</p> </p>
<div class="btn-read-more">Leer más</div> <div className="btn-read-more">Leer más</div>
</div> </div>
</div> </div>
<div class="card-blog"> <div className="card-blog">
<div class="container-img"> <div className="container-img">
<img src={PastelZanahoria} alt="Imagen Blog 2" /> <img src={PastelZanahoria} alt="Imagen Blog 2" />
<div class="button-group-blog"> <div className="button-group-blog">
<span> <span>
<i class="fa-solid fa-magnifying-glass"></i> <i className="fa-solid fa-magnifying-glass"></i>
</span> </span>
<span> <span>
<i class="fa-solid fa-link"></i> <i className="fa-solid fa-link"></i>
</span> </span>
</div> </div>
</div> </div>
<div class="content-blog"> <div className="content-blog">
<h3>Receta: Pastel de Zanahoria</h3> <h3>Receta: Pastel de Zanahoria</h3>
<span>23 de abril de 2024</span> <span>23 de abril de 2024</span>
<p> <p>
El pastel de zanahoria es una verdadera joya en el mundo de la repostería. Su combinación de sabores dulces y especiados, junto con la textura húmeda y esponjosa, lo convierten en un postre irresistible para cualquier ocasión. En este artículo, te compartiré mi receta favorita de pastel El pastel de zanahoria es una verdadera joya en el mundo de la repostería. Su combinación de sabores dulces y especiados, junto con la textura húmeda y esponjosa, lo convierten en un postre irresistible para cualquier ocasión. En este artículo, te compartiré mi receta favorita de pastel
de zanahoria para que puedas disfrutar de esta delicia en cada bocado. de zanahoria para que puedas disfrutar de esta delicia en cada bocado.
</p> </p>
<div class="btn-read-more">Leer más</div> <div className="btn-read-more">Leer más</div>
</div> </div>
</div> </div>
<div class="card-blog"> <div className="card-blog">
<div class="container-img"> <div className="container-img">
<img src={PastelTematico} alt="Imagen Blog 3" /> <img src={PastelTematico} alt="Imagen Blog 3" />
<div class="button-group-blog"> <div className="button-group-blog">
<span> <span>
<i class="fa-solid fa-magnifying-glass"></i> <i className="fa-solid fa-magnifying-glass"></i>
</span> </span>
<span> <span>
<i class="fa-solid fa-link"></i> <i className="fa-solid fa-link"></i>
</span> </span>
</div> </div>
</div> </div>
<div class="content-blog"> <div className="content-blog">
<h3>5 Caracteristicas de un patel tematico</h3> <h3>5 Caracteristicas de un patel tematico</h3>
<span>20 de abril de 2024</span> <span>20 de abril de 2024</span>
<p> <p>
@ -337,18 +415,18 @@ function App() {
voluptas facilis corporis, consequatur eius est sunt voluptas facilis corporis, consequatur eius est sunt
suscipit? suscipit?
</p> </p>
<div class="btn-read-more">Leer más</div> <div className="btn-read-more">Leer más</div>
</div> </div>
</div> </div>
</div> </div>
</section> </section>
</main> </main>
<footer class="footer"> <footer className="footer">
<div class="container container-footer"> <div className="container container-footer">
<div class="menu-footer"> <div className="menu-footer">
<div class="contact-info"> <div className="contact-info">
<p class="title-footer">Información de Contacto</p> <p className="title-footer">Información de Contacto</p>
<ul> <ul>
<li> <li>
Avenida Xalapa Avenida Xalapa
@ -356,38 +434,39 @@ function App() {
<li>Teléfono: 2288520821</li> <li>Teléfono: 2288520821</li>
<li>EmaiL: cdgn_17@hotmail.com</li> <li>EmaiL: cdgn_17@hotmail.com</li>
</ul> </ul>
<div class="social-icons"> <div className="social-icons">
<span class="facebook"> <span className="facebook">
<i class="fa-brands fa-facebook-f"></i> <i className="fa-brands fa-facebook-f"></i>
</span> </span>
<span class="twitter"> <span className="twitter">
<i class="fa-brands fa-twitter"></i> <i className="fa-brands fa-twitter"></i>
</span> </span>
<span class="youtube"> <span className="youtube">
<i class="fa-brands fa-youtube"></i> <i className="fa-brands fa-youtube"></i>
</span> </span>
<span class="pinterest"> <span className="pinterest">
<i class="fa-brands fa-pinterest-p"></i> <i className="fa-brands fa-pinterest-p"></i>
</span> </span>
<span class="instagram"> <span className="instagram">
<i class="fa-brands fa-instagram"></i> <i className="fa-brands fa-instagram"></i>
</span> </span>
</div> </div>
</div> </div>
<div class="information"> <div className="information">
<p class="title-footer">Información</p> <p className="title-footer">Información</p>
<ul> <ul>
<li><a href="#">Acerca de Nosotros</a></li> <li><a href="#">Acerca de Nosotros</a></li>
<li><a href="#">Información de Entrega</a></li> <li><a href="#">Información de Entrega</a></li>
<li><a href="#">Politicas de Privacidad</a></li> <li><a href="#">Politicas de Privacidad</a></li>
<li><a href="#">Términos y condiciones</a></li> <li><a href="#">Términos y condiciones</a></li>
<li><a href="#">Contactános</a></li> <li><a href="#">Contactános</a></li>
</ul> </ul>
</div> </div>
<div class="my-account"> <div className="my-account">
<p class="title-footer">Mi cuenta</p> <p className="title-footer">Mi cuenta</p>
<ul> <ul>
<li><a href="#">Mi cuenta</a></li> <li><a href="#">Mi cuenta</a></li>
@ -399,7 +478,7 @@ function App() {
</div> </div>
<div class="copyright"> <div className="copyright">
</div> </div>
@ -408,7 +487,7 @@ function App() {
<script <script
src="https://kit.fontawesome.com/81581fb069.js" src="https://kit.fontawesome.com/81581fb069.js"
crossorigin="anonymous" crossOrigin="anonymous"
></script> ></script>
</body> </body>

229
frontend/src/Pasteles.jsx
View File

@ -1,4 +1,4 @@
import { useState } from 'react' import React, {useEffect, useState} from "react";
import viteLogo from '/vite.svg' import viteLogo from '/vite.svg'
@ -20,6 +20,7 @@ import PastelEditado6 from "./assets/Edicion6.jpg";
import PastelZanahoria from "./assets/Pastel-Zanahoria.jpg"; import PastelZanahoria from "./assets/Pastel-Zanahoria.jpg";
import MejoresPasteles from "./assets/MejoresPasteles.jpg"; import MejoresPasteles from "./assets/MejoresPasteles.jpg";
import PastelTematico from "./assets/pastel-tematico.jpg"; import PastelTematico from "./assets/pastel-tematico.jpg";
import Swal from 'sweetalert2'
function AppPasteles() { function AppPasteles() {
const [count, setCount] = useState(0); const [count, setCount] = useState(0);
@ -30,6 +31,12 @@ function AppPasteles() {
navigate("/PersonalizarPastel/PastelArcoiris"); navigate("/PersonalizarPastel/PastelArcoiris");
}; };
const redirectToLogin = () => {
navigate("/Login");
};
const redirectToPedidos = () => { const redirectToPedidos = () => {
navigate("/Pedidos"); navigate("/Pedidos");
@ -68,6 +75,54 @@ function AppPasteles() {
navigate("/Pasteles/PastelCajeta") navigate("/Pasteles/PastelCajeta")
}; };
const [nombreUsuario, setNombreUsuario]=useState("");
const mostrarAlertaLogOut=()=>{
Swal.fire({
title: "Cerrar Sesion",
text: "Seguro que quieres cerrar sesion",
icon: "warning",
buttons: ["No","Si"]
}).then(respuesta=>{
if(respuesta){
Swal.fire({text: "Sesion cerrada correctamente. Adios "+nombreUsuario+"",
icon: "success"
})
cerrarSesion();
}
})
}
const obtenerNombreUsuario = async () => {
try {
// Realizar la llamada al backend para obtener el nombre del usuario
const response = await axios.post('http://localhost:4567/frontend/obtenerUsuario');
setNombreUsuario(response.data.nombre);
} catch (error) {
// Manejar el error según tus necesidades
console.error("Error al obtener el nombre del usuario", error);
}
};
const cerrarSesion = async () => {
try {
// Realizar la llamada al backend para obtener el nombre del usuario
const response = await axios.post('http://localhost:4567/frontend/cerrarSesion');
setNombreUsuario(response.data.nombre);
obtenerNombreUsuario();
redirectToHotelPage();
} catch (error) {
// Manejar el error según tus necesidades
console.error("Error al obtener el nombre del usuario", error);
}
};
useEffect(() => {
// Llamar a la función al cargar la página
obtenerNombreUsuario();
}, []);
return ( return (
<> <>
<body> <body>
@ -108,7 +163,15 @@ function AppPasteles() {
<li><a href="#" onClick={redirectPersonalizarPastelArcoiris}>Personalizar Pastel</a></li> <li><a href="#" onClick={redirectPersonalizarPastelArcoiris}>Personalizar Pastel</a></li>
<li><a href="/Pedidos" onClick={redirectToPedidos}>Pedidos</a></li> <li><a href="/Pedidos" onClick={redirectToPedidos}>Pedidos</a></li>
<li><a href="#">Blog</a></li> <li><a href="#">Blog</a></li>
{nombreUsuario ? (
<>
<li className="enlace"><a href="#">{nombreUsuario}</a></li>
<li className="enlace"><a href="#" onClick={mostrarAlertaLogOut}>Cerrar Sesión</a></li>
</>
) : (
<li className="enlace"><a href="#" onClick={redirectToLogin}>Iniciar Sesión</a></li>
)
}
</ul> </ul>
@ -133,175 +196,175 @@ function AppPasteles() {
</section> </section>
<section className="container top-products"> <section className="container top-products">
<section class="container top-products"> <section className="container top-products">
<h1 class="heading-2"><strong>Productos en linea:</strong> </h1> <h1 className="heading-2"><strong>Productos en linea:</strong> </h1>
<div class="container-options"> <div className="container-options">
</div> </div>
<div class="container-products"> <div className="container-products">
<div class="card-product"> <div className="card-product">
<div class="container-img"> <div className="container-img">
<img src={PastelEditado1} alt="Pastel Chocolate Blanco" /> <img src={PastelEditado1} alt="Pastel Chocolate Blanco" />
<span class="discount">-10%</span> <span className="discount">-10%</span>
<div class="button-group"> <div className="button-group">
</div> </div>
</div> </div>
<div class="content-card-product"> <div className="content-card-product">
<div class="stars"> <div className="stars">
<i class="fa-solid fa-star"></i> <i className="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i> <i className="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i> <i className="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i> <i className="fa-solid fa-star"></i>
<i class="fa-regular fa-star"></i> <i className="fa-regular fa-star"></i>
</div> </div>
<h3 className='heading-3'>Pastel Chocolate Blanco</h3> <h3 className='heading-3'>Pastel Chocolate Blanco</h3>
<span class= "add-cart" onClick={redirectToChocolate}> <span className= "add-cart" onClick={redirectToChocolate}>
<FaRegEye className="icono-eye" /> <FaRegEye className="icono-eye" />
</span> </span>
<p class="price">$603<span>$670</span></p> <p className="price">$603<span>$670</span></p>
</div> </div>
</div> </div>
<div class="card-product"> <div className="card-product">
<div class="container-img"> <div className="container-img">
<img <img
src={PastelEditado2} alt="Cafe incafe-ingles.jpg" src={PastelEditado2} alt="Cafe incafe-ingles.jpg"
/> />
<span class="discount">-30%</span> <span className="discount">-30%</span>
<div class="button-group"> <div className="button-group">
</div> </div>
</div> </div>
<div class="content-card-product"> <div className="content-card-product">
<div class="stars"> <div className="stars">
<i class="fa-solid fa-star"></i> <i className="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i> <i className="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i> <i className="fa-solid fa-star"></i>
<i class="fa-regular fa-star"></i> <i className="fa-regular fa-star"></i>
<i class="fa-regular fa-star"></i> <i className="fa-regular fa-star"></i>
</div> </div>
<h3>Pastel de Moka</h3> <h3>Pastel de Moka</h3>
<span class="add-cart" onClick={redirectToMoka}> <span className="add-cart" onClick={redirectToMoka}>
<FaRegEye className="icono-eye" /> <FaRegEye className="icono-eye" />
</span> </span>
<p class="price">$560 <span>$800</span></p> <p className="price">$560 <span>$800</span></p>
</div> </div>
</div> </div>
<div class="card-product"> <div className="card-product">
<div class="container-img"> <div className="container-img">
<img <img
src={PastelEditado3} src={PastelEditado3}
alt="Cafe Australiano" alt="Cafe Australiano"
/> />
<div class="button-group"> <div className="button-group">
</div> </div>
</div> </div>
<div class="content-card-product"> <div className="content-card-product">
<div class="stars"> <div className="stars">
<i class="fa-solid fa-star"></i> <i className="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i> <i className="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i> <i className="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i> <i className="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i> <i className="fa-solid fa-star"></i>
</div> </div>
<h3>Pastel de Chocolate</h3> <h3>Pastel de Chocolate</h3>
<span class="add-cart" onClick={redirectToChocolate2}> <span className="add-cart" onClick={redirectToChocolate2}>
<FaRegEye className="icono-eye" /> <FaRegEye className="icono-eye" />
</span> </span>
<p class="price">$350</p> <p className="price">$350</p>
</div> </div>
</div> </div>
<div class="card-product"> <div className="card-product">
<div class="container-img"> <div className="container-img">
<img src={PastelEditado4} alt="Moka" /> <img src={PastelEditado4} alt="Moka" />
<div class="button-group"> <div className="button-group">
</div> </div>
</div> </div>
<div class="content-card-product"> <div className="content-card-product">
<div class="stars"> <div className="stars">
<i class="fa-solid fa-star"></i> <i className="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i> <i className="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i> <i className="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i> <i className="fa-solid fa-star"></i>
<i class="fa-regular fa-star"></i> <i className="fa-regular fa-star"></i>
</div> </div>
<h3>Pastel de Zanahoria</h3> <h3>Pastel de Zanahoria</h3>
<span class="add-cart" onClick={redirectToPastelZanahoria}> <span className="add-cart" onClick={redirectToPastelZanahoria}>
<FaRegEye className="icono-eye" /> <FaRegEye className="icono-eye" />
</span> </span>
<p class="price">$450</p> <p className="price">$450</p>
</div> </div>
</div> </div>
<div class="card-product"> <div className="card-product">
<div class="container-img"> <div className="container-img">
<img src={PastelEditado5} alt="Cafe Irish" /> <img src={PastelEditado5} alt="Cafe Irish" />
<span class="discount">-13%</span> <span className="discount">-13%</span>
<div class="button-group"> <div className="button-group">
</div> </div>
</div> </div>
<div class="content-card-product"> <div className="content-card-product">
<div class="stars"> <div className="stars">
<i class="fa-solid fa-star"></i> <i className="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i> <i className="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i> <i className="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i> <i className="fa-solid fa-star"></i>
<i class="fa-regular fa-star"></i> <i className="fa-regular fa-star"></i>
</div> </div>
<h3>Pastel Frambuesa</h3> <h3>Pastel Frambuesa</h3>
<span class="add-cart" onClick={redirectToPastelFrambuesa}> <span className="add-cart" onClick={redirectToPastelFrambuesa}>
<FaRegEye className="icono-eye" /> <FaRegEye className="icono-eye" />
</span> </span>
<p class="price">$300 </p> <p className="price">$300 </p>
</div> </div>
</div> </div>
<div class="card-product"> <div className="card-product">
<div class="container-img"> <div className="container-img">
<img <img
src={PastelEditado6} src={PastelEditado6}
alt="Cafe incafe-ingles.jpg" alt="Cafe incafe-ingles.jpg"
/> />
<span class="discount">-22%</span> <span className="discount">-22%</span>
<div class="button-group"> <div className="button-group">
</div> </div>
</div> </div>
<div class="content-card-product"> <div className="content-card-product">
<div class="stars"> <div className="stars">
<i class="fa-solid fa-star"></i> <i className="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i> <i className="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i> <i className="fa-solid fa-star"></i>
<i class="fa-regular fa-star"></i> <i className="fa-regular fa-star"></i>
<i class="fa-regular fa-star"></i> <i className="fa-regular fa-star"></i>
</div> </div>
<h3>Pastel de Cajeta</h3> <h3>Pastel de Cajeta</h3>
<span class="add-cart" onClick={redirectToPastelCajeta}> <span className="add-cart" onClick={redirectToPastelCajeta}>
<FaRegEye className="icono-eye" /> <FaRegEye className="icono-eye" />
</span> </span>
<p class="price">$390 <span>$500</span></p> <p className="price">$390 <span>$500</span></p>
</div> </div>
</div> </div>
</div> </div>
<div class="container-products"> <div className="container-products">
</div> </div>

42
frontend/src/Pasteles/ChocolateBlanco.jsx
View File

@ -169,11 +169,11 @@ function ChocolateBlanco() {
</div> </div>
</main> </main>
<footer class="footer"> <footer className="footer">
<div class="container container-footer"> <div className="container container-footer">
<div class="menu-footer"> <div className="menu-footer">
<div class="contact-info"> <div className="contact-info">
<p class="title-footer">Información de Contacto</p> <p className="title-footer">Información de Contacto</p>
<ul> <ul>
<li> <li>
Avenida Xalapa Avenida Xalapa
@ -181,27 +181,27 @@ function ChocolateBlanco() {
<li>Teléfono: 2288520821</li> <li>Teléfono: 2288520821</li>
<li>EmaiL: cdgn_17@hotmail.com</li> <li>EmaiL: cdgn_17@hotmail.com</li>
</ul> </ul>
<div class="social-icons"> <div className="social-icons">
<span class="facebook"> <span className="facebook">
<i class="fa-brands fa-facebook-f"></i> <i className="fa-brands fa-facebook-f"></i>
</span> </span>
<span class="twitter"> <span className="twitter">
<i class="fa-brands fa-twitter"></i> <i className="fa-brands fa-twitter"></i>
</span> </span>
<span class="youtube"> <span className="youtube">
<i class="fa-brands fa-youtube"></i> <i className="fa-brands fa-youtube"></i>
</span> </span>
<span class="pinterest"> <span className="pinterest">
<i class="fa-brands fa-pinterest-p"></i> <i className="fa-brands fa-pinterest-p"></i>
</span> </span>
<span class="instagram"> <span className="instagram">
<i class="fa-brands fa-instagram"></i> <i className="fa-brands fa-instagram"></i>
</span> </span>
</div> </div>
</div> </div>
<div class="information"> <div className="information">
<p class="title-footer">Información</p> <p className="title-footer">Información</p>
<ul> <ul>
<li><a href="#">Acerca de Nosotros</a></li> <li><a href="#">Acerca de Nosotros</a></li>
<li><a href="#">Información de Entrega</a></li> <li><a href="#">Información de Entrega</a></li>
@ -211,8 +211,8 @@ function ChocolateBlanco() {
</ul> </ul>
</div> </div>
<div class="my-account"> <div className="my-account">
<p class="title-footer">Mi cuenta</p> <p className="title-footer">Mi cuenta</p>
<ul> <ul>
<li><a href="#">Mi cuenta</a></li> <li><a href="#">Mi cuenta</a></li>
@ -224,7 +224,7 @@ function ChocolateBlanco() {
</div> </div>
<div class="copyright"> <div className="copyright">
</div> </div>

42
frontend/src/Pasteles/PastelCajeta.jsx
View File

@ -170,11 +170,11 @@ function PastelCajeta() {
</div> </div>
</main> </main>
<footer class="footer"> <footer className="footer">
<div class="container container-footer"> <div className="container container-footer">
<div class="menu-footer"> <div className="menu-footer">
<div class="contact-info"> <div className="contact-info">
<p class="title-footer">Información de Contacto</p> <p className="title-footer">Información de Contacto</p>
<ul> <ul>
<li> <li>
Avenida Xalapa Avenida Xalapa
@ -182,27 +182,27 @@ function PastelCajeta() {
<li>Teléfono: 2288520821</li> <li>Teléfono: 2288520821</li>
<li>EmaiL: cdgn_17@hotmail.com</li> <li>EmaiL: cdgn_17@hotmail.com</li>
</ul> </ul>
<div class="social-icons"> <div className="social-icons">
<span class="facebook"> <span className="facebook">
<i class="fa-brands fa-facebook-f"></i> <i className="fa-brands fa-facebook-f"></i>
</span> </span>
<span class="twitter"> <span className="twitter">
<i class="fa-brands fa-twitter"></i> <i className="fa-brands fa-twitter"></i>
</span> </span>
<span class="youtube"> <span className="youtube">
<i class="fa-brands fa-youtube"></i> <i className="fa-brands fa-youtube"></i>
</span> </span>
<span class="pinterest"> <span className="pinterest">
<i class="fa-brands fa-pinterest-p"></i> <i className="fa-brands fa-pinterest-p"></i>
</span> </span>
<span class="instagram"> <span className="instagram">
<i class="fa-brands fa-instagram"></i> <i className="fa-brands fa-instagram"></i>
</span> </span>
</div> </div>
</div> </div>
<div class="information"> <div className="information">
<p class="title-footer">Información</p> <p className="title-footer">Información</p>
<ul> <ul>
<li><a href="#">Acerca de Nosotros</a></li> <li><a href="#">Acerca de Nosotros</a></li>
<li><a href="#">Información de Entrega</a></li> <li><a href="#">Información de Entrega</a></li>
@ -212,8 +212,8 @@ function PastelCajeta() {
</ul> </ul>
</div> </div>
<div class="my-account"> <div className="my-account">
<p class="title-footer">Mi cuenta</p> <p className="title-footer">Mi cuenta</p>
<ul> <ul>
<li><a href="#">Mi cuenta</a></li> <li><a href="#">Mi cuenta</a></li>
@ -225,7 +225,7 @@ function PastelCajeta() {
</div> </div>
<div class="copyright"> <div className="copyright">
</div> </div>

42
frontend/src/Pasteles/PastelChocolate.jsx
View File

@ -172,11 +172,11 @@ function PastelChocolate() {
</div> </div>
</main> </main>
<footer class="footer"> <footer className="footer">
<div class="container container-footer"> <div className="container container-footer">
<div class="menu-footer"> <div className="menu-footer">
<div class="contact-info"> <div className="contact-info">
<p class="title-footer">Información de Contacto</p> <p className="title-footer">Información de Contacto</p>
<ul> <ul>
<li> <li>
Avenida Xalapa Avenida Xalapa
@ -184,27 +184,27 @@ function PastelChocolate() {
<li>Teléfono: 2288520821</li> <li>Teléfono: 2288520821</li>
<li>EmaiL: cdgn_17@hotmail.com</li> <li>EmaiL: cdgn_17@hotmail.com</li>
</ul> </ul>
<div class="social-icons"> <div className="social-icons">
<span class="facebook"> <span className="facebook">
<i class="fa-brands fa-facebook-f"></i> <i className="fa-brands fa-facebook-f"></i>
</span> </span>
<span class="twitter"> <span className="twitter">
<i class="fa-brands fa-twitter"></i> <i className="fa-brands fa-twitter"></i>
</span> </span>
<span class="youtube"> <span className="youtube">
<i class="fa-brands fa-youtube"></i> <i className="fa-brands fa-youtube"></i>
</span> </span>
<span class="pinterest"> <span className="pinterest">
<i class="fa-brands fa-pinterest-p"></i> <i className="fa-brands fa-pinterest-p"></i>
</span> </span>
<span class="instagram"> <span className="instagram">
<i class="fa-brands fa-instagram"></i> <i className="fa-brands fa-instagram"></i>
</span> </span>
</div> </div>
</div> </div>
<div class="information"> <div className="information">
<p class="title-footer">Información</p> <p className="title-footer">Información</p>
<ul> <ul>
<li><a href="#">Acerca de Nosotros</a></li> <li><a href="#">Acerca de Nosotros</a></li>
<li><a href="#">Información de Entrega</a></li> <li><a href="#">Información de Entrega</a></li>
@ -214,8 +214,8 @@ function PastelChocolate() {
</ul> </ul>
</div> </div>
<div class="my-account"> <div className="my-account">
<p class="title-footer">Mi cuenta</p> <p className="title-footer">Mi cuenta</p>
<ul> <ul>
<li><a href="#">Mi cuenta</a></li> <li><a href="#">Mi cuenta</a></li>
@ -227,7 +227,7 @@ function PastelChocolate() {
</div> </div>
<div class="copyright"> <div className="copyright">
</div> </div>

42
frontend/src/Pasteles/PastelFrambuesa.jsx
View File

@ -169,11 +169,11 @@ function PastelFrambuesa() {
</div> </div>
</main> </main>
<footer class="footer"> <footer className="footer">
<div class="container container-footer"> <div className="container container-footer">
<div class="menu-footer"> <div className="menu-footer">
<div class="contact-info"> <div className="contact-info">
<p class="title-footer">Información de Contacto</p> <p className="title-footer">Información de Contacto</p>
<ul> <ul>
<li> <li>
Avenida Xalapa Avenida Xalapa
@ -181,27 +181,27 @@ function PastelFrambuesa() {
<li>Teléfono: 2288520821</li> <li>Teléfono: 2288520821</li>
<li>EmaiL: cdgn_17@hotmail.com</li> <li>EmaiL: cdgn_17@hotmail.com</li>
</ul> </ul>
<div class="social-icons"> <div className="social-icons">
<span class="facebook"> <span className="facebook">
<i class="fa-brands fa-facebook-f"></i> <i className="fa-brands fa-facebook-f"></i>
</span> </span>
<span class="twitter"> <span className="twitter">
<i class="fa-brands fa-twitter"></i> <i className="fa-brands fa-twitter"></i>
</span> </span>
<span class="youtube"> <span className="youtube">
<i class="fa-brands fa-youtube"></i> <i className="fa-brands fa-youtube"></i>
</span> </span>
<span class="pinterest"> <span className="pinterest">
<i class="fa-brands fa-pinterest-p"></i> <i className="fa-brands fa-pinterest-p"></i>
</span> </span>
<span class="instagram"> <span className="instagram">
<i class="fa-brands fa-instagram"></i> <i className="fa-brands fa-instagram"></i>
</span> </span>
</div> </div>
</div> </div>
<div class="information"> <div className="information">
<p class="title-footer">Información</p> <p className="title-footer">Información</p>
<ul> <ul>
<li><a href="#">Acerca de Nosotros</a></li> <li><a href="#">Acerca de Nosotros</a></li>
<li><a href="#">Información de Entrega</a></li> <li><a href="#">Información de Entrega</a></li>
@ -211,8 +211,8 @@ function PastelFrambuesa() {
</ul> </ul>
</div> </div>
<div class="my-account"> <div className="my-account">
<p class="title-footer">Mi cuenta</p> <p className="title-footer">Mi cuenta</p>
<ul> <ul>
<li><a href="#">Mi cuenta</a></li> <li><a href="#">Mi cuenta</a></li>
@ -224,7 +224,7 @@ function PastelFrambuesa() {
</div> </div>
<div class="copyright"> <div className="copyright">
</div> </div>

42
frontend/src/Pasteles/PastelMoka.jsx
View File

@ -173,11 +173,11 @@ function PastelMoka() {
</div> </div>
</main> </main>
<footer class="footer"> <footer className="footer">
<div class="container container-footer"> <div className="container container-footer">
<div class="menu-footer"> <div className="menu-footer">
<div class="contact-info"> <div className="contact-info">
<p class="title-footer">Información de Contacto</p> <p className="title-footer">Información de Contacto</p>
<ul> <ul>
<li> <li>
Avenida Xalapa Avenida Xalapa
@ -185,27 +185,27 @@ function PastelMoka() {
<li>Teléfono: 2288520821</li> <li>Teléfono: 2288520821</li>
<li>EmaiL: cdgn_17@hotmail.com</li> <li>EmaiL: cdgn_17@hotmail.com</li>
</ul> </ul>
<div class="social-icons"> <div className="social-icons">
<span class="facebook"> <span className="facebook">
<i class="fa-brands fa-facebook-f"></i> <i className="fa-brands fa-facebook-f"></i>
</span> </span>
<span class="twitter"> <span className="twitter">
<i class="fa-brands fa-twitter"></i> <i className="fa-brands fa-twitter"></i>
</span> </span>
<span class="youtube"> <span className="youtube">
<i class="fa-brands fa-youtube"></i> <i className="fa-brands fa-youtube"></i>
</span> </span>
<span class="pinterest"> <span className="pinterest">
<i class="fa-brands fa-pinterest-p"></i> <i className="fa-brands fa-pinterest-p"></i>
</span> </span>
<span class="instagram"> <span className="instagram">
<i class="fa-brands fa-instagram"></i> <i className="fa-brands fa-instagram"></i>
</span> </span>
</div> </div>
</div> </div>
<div class="information"> <div className="information">
<p class="title-footer">Información</p> <p className="title-footer">Información</p>
<ul> <ul>
<li><a href="#">Acerca de Nosotros</a></li> <li><a href="#">Acerca de Nosotros</a></li>
<li><a href="#">Información de Entrega</a></li> <li><a href="#">Información de Entrega</a></li>
@ -215,8 +215,8 @@ function PastelMoka() {
</ul> </ul>
</div> </div>
<div class="my-account"> <div className="my-account">
<p class="title-footer">Mi cuenta</p> <p className="title-footer">Mi cuenta</p>
<ul> <ul>
<li><a href="#">Mi cuenta</a></li> <li><a href="#">Mi cuenta</a></li>
@ -228,7 +228,7 @@ function PastelMoka() {
</div> </div>
<div class="copyright"> <div className="copyright">
</div> </div>

42
frontend/src/Pasteles/PastelZanahoria.jsx
View File

@ -169,11 +169,11 @@ function PastelZanahoria() {
</div> </div>
</main> </main>
<footer class="footer"> <footer className="footer">
<div class="container container-footer"> <div className="container container-footer">
<div class="menu-footer"> <div className="menu-footer">
<div class="contact-info"> <div className="contact-info">
<p class="title-footer">Información de Contacto</p> <p className="title-footer">Información de Contacto</p>
<ul> <ul>
<li> <li>
Avenida Xalapa Avenida Xalapa
@ -181,27 +181,27 @@ function PastelZanahoria() {
<li>Teléfono: 2288520821</li> <li>Teléfono: 2288520821</li>
<li>EmaiL: cdgn_17@hotmail.com</li> <li>EmaiL: cdgn_17@hotmail.com</li>
</ul> </ul>
<div class="social-icons"> <div className="social-icons">
<span class="facebook"> <span className="facebook">
<i class="fa-brands fa-facebook-f"></i> <i className="fa-brands fa-facebook-f"></i>
</span> </span>
<span class="twitter"> <span className="twitter">
<i class="fa-brands fa-twitter"></i> <i className="fa-brands fa-twitter"></i>
</span> </span>
<span class="youtube"> <span className="youtube">
<i class="fa-brands fa-youtube"></i> <i className="fa-brands fa-youtube"></i>
</span> </span>
<span class="pinterest"> <span className="pinterest">
<i class="fa-brands fa-pinterest-p"></i> <i className="fa-brands fa-pinterest-p"></i>
</span> </span>
<span class="instagram"> <span className="instagram">
<i class="fa-brands fa-instagram"></i> <i className="fa-brands fa-instagram"></i>
</span> </span>
</div> </div>
</div> </div>
<div class="information"> <div className="information">
<p class="title-footer">Información</p> <p className="title-footer">Información</p>
<ul> <ul>
<li><a href="#">Acerca de Nosotros</a></li> <li><a href="#">Acerca de Nosotros</a></li>
<li><a href="#">Información de Entrega</a></li> <li><a href="#">Información de Entrega</a></li>
@ -211,8 +211,8 @@ function PastelZanahoria() {
</ul> </ul>
</div> </div>
<div class="my-account"> <div className="my-account">
<p class="title-footer">Mi cuenta</p> <p className="title-footer">Mi cuenta</p>
<ul> <ul>
<li><a href="#">Mi cuenta</a></li> <li><a href="#">Mi cuenta</a></li>
@ -224,7 +224,7 @@ function PastelZanahoria() {
</div> </div>
<div class="copyright"> <div className="copyright">
</div> </div>

292
frontend/src/Sesion/LoginForm.css
View File

@ -1,210 +1,126 @@
/* POPPINS FONT */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');
.body-login{
background: url("/src/assets/fondo_pasteles.jpg");
background-size: 100%;
background-repeat: no-repeat;
overflow: hidden;
background-attachment: fixed;
display: flex;
height: 100%;
position: relative;
justify-content: center;
margin: 0;
padding: 0;
}
.wrapper{ .wrapper{
display: flex; width: 450px;
width: 40%; background: transparent;
height: 100vh; border: 2px solid rgba(255, 255, 255, .2);
padding-left: 4px; backdrop-filter: blur(50px);
align-items: center; box-shadow: 0 0 10px rgba(0, 0, 0, .2);
justify-content: center; color: #fff;
border-radius: 20px;
padding: 50px 30px;
} }
.link:hover, .active{ .wrapper h1{
border-bottom: 2px solid #fff; font-size: 36px;
}
.btn:hover{
background: rgba(255, 255, 255, 0.3);
}
#registerBtn{
margin-left: 15px;
}
.btn.white-btn{
background: rgba(255, 255, 255, 0.7);
}
.btn.btn.white-btn:hover{
background: rgba(255, 255, 255, 0.5);
}
.form-box{
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 512px;
height: 500px;
overflow: hidden;
z-index: 2;
border-radius: 4%;
background: rgba(39, 39, 39, 0.5);
}
.login-container{
position: absolute;
left: 4px;
width: 500px;
opacity: 1;
display: flex;
flex-direction: column;
transition: .5s ease-in-out;
}
.register-container{
position: absolute;
right: -520px;
width: 500px;
display: flex;
flex-direction: column;
transition: .5s ease-in-out;
gap: 7px;
}
.password-container{
position: absolute;
right: -520px;
width: 500px;
display: flex;
flex-direction: column;
transition: .5s ease-in-out;
gap: 7px;
}
.top span{
color: #fff;
font-size: small;
padding: 10px 0;
display: flex;
justify-content: center;
}
.top2 span{
color: #fff;
font-size: small;
padding: 10px 0;
display: flex;
justify-content: center;
}
.two span a{
font-weight: 500;
color: #fff;
margin-left: 5px;
}
.top span a{
font-weight: 500;
color: #fff;
margin-left: 5px;
}
.top2 span a{
font-weight: 500;
color: #fff;
margin-left: 5px;
}
.header-login{
color: #fff;
font-size: 30px;
text-align: center; text-align: center;
padding: 10px 0 30px 0;
} }
.two-forms{
display: flex; .wrapper .input-box{
gap: 20px;
}
.input-field{
font-size: 15px;
background: rgba(255, 255, 255, 0.2);
color: #fff;
height: 50px;
width: 100%;
padding: 0 10px 0 45px;
border: none;
border-radius: 30px;
outline: none;
transition: .2s ease;
margin-bottom: 10px; /*para separar los componentes agregando un margen por debajo*/
}
.input-field:hover, .input-field:focus{
background: rgba(255, 255, 255, 0.25);
}
::-webkit-input-placeholder{
color: #fff;
}
.input-box i{
position: relative; position: relative;
margin-top: 10px;
margin-bottom: 10px; margin: 30px 0;
top: -35px;
left: 17px;
color: #fff;
} }
.input-box i{ .input-box input{
position: relative;
margin-top: 10px;
margin-bottom: 10px;
top: -35px;
left: 17px;
color: #fff;
}
.submit{
font-size: 15px;
font-weight: 500;
color: black;
height: 45px;
width: 100%; width: 100%;
border: none; height: 100%;
border-radius: 30px; background: transparent;
border: 2px solid rgba(255, 255, 255, .2);
outline: none; outline: none;
background: rgba(255, 255, 255, 0.7); border-radius: 40px;
cursor: pointer; font-size: 16px;
transition: .3s ease-in-out; color: #fff;
padding: 20px 45px 20px 20px;
} }
.submit:hover{
background: rgba(255, 255, 255, 0.5); .input-box input::placeholder{
box-shadow: 1px 5px 7px 1px rgba(0, 0, 0, 0.2); color: #fff;
} }
.two-col{ .input-box .icon{
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
font-size: 16px;
}
.wrapper .remember-forgot{
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
font-size: 14.5px;
margin: -15px 0 15px;
}
.remember-forgot label input{
accent-color: #fff;
margin-right: 4px;
}
.remember-forgot a{
color: #fff; color: #fff;
font-size: small;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 10px;
}
.two-col .one{
display: flex;
gap: 5px;
}
.two label a{
text-decoration: none; text-decoration: none;
color: #fff;
} }
.two label a:hover{ .remember-forgot a:hover{
text-decoration: underline; text-decoration: underline;
} }
@media only screen and (max-width: 540px) { .wrapper .boton1{
.wrapper{ display: inline-block;
position: absolute;
background-color: none;
top: 20px;
left: 10px;
width: 45px;
height: 35px;
padding: 0px;
padding-left: 0px;
padding-right: 0px;
font-size: 14px;
}
.wrapper button{
width: 100%;
height: 45px;
background: #fff;
border: none;
outline: none;
border-radius: 40px;
box-shadow: 0 0 10px rgba(0, 0, 0, .1);
cursor: pointer;
font-size: 16px;
color: #333;
font-weight: 700;
}
.wrapper .register-link{
font-size: 14.5px;
text-align: center;
margin: 20px 0 15px;
}
.register-link p a{
color: #fff;
text-decoration: none;
font-weight: 600;
}
.register-link p a:hover {
text-decoration: underline;
}
.cuerpo {
width: 135.1%;
background-repeat: no-repeat;
height: 100%;
padding-left: 0%;
background-size: 100% auto;
margin:0;
font-family: 'Poppins', sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh; min-height: 100vh;
background: url("src/assets/fondo_pasteles.jpg");
background-position: center;
} }
.form-box{
width: 100%; .cuerpo {
height: 500px; transform: translateX(-361px);
}
.register-container, .login-container{
width: 100%;
padding: 0 20px;
}
.register-container .two-forms{
flex-direction: column;
gap: 0;
}
} }

101
frontend/src/Sesion/LoginForm.jsx
View File

@ -1,34 +1,29 @@
import React, { useState } from 'react'; import React, { useState } from "react";
import './LoginForm.css'; import './LoginForm.css';
import { redirect } from 'react-router-dom'; import { FaUser, FaLock, FaHome } from "react-icons/fa";
import { TextField, Button, Box } from "@mui/material";
import axios from "axios"; import axios from "axios";
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
//import PopupV from "/src/Popups/PopupLoginValido.jsx";
//import PopupIv from "./Popups/PopupLoginInvalido.jsx"; import PopupV from "/src/Popups/PopupLoginValido.jsx";
import PopupIv from "/src/Popups/PopupLoginInvalido.jsx";
import Swal from 'sweetalert2'
function LoginForm(props){ function LoginForm(props){
const navigate = useNavigate(); const navigate = useNavigate();
const [Cargando, setCargando] = useState(false) const [Cargando, setCargando] = useState(false)
const [datosFormulario, setDatosFormulario] = useState({ const [datosFormulario, setDatosFormulario] = useState(
correo: '', {correo: '',
password: '' password: ''
}) })
const [loginVisible, setLoginVisible] = useState(true); const redirectToRecuperarContraseña = () => {
const [registerVisible, setRegisterVisible] = useState(false);
const [passwordVisible, setPasswordVisible] = useState(false);
const redirectToRegister = () => {
navigate("/Registro");
};
const redirectToRecuperarContra = () => {
navigate("/RecuperarContraseña"); navigate("/RecuperarContraseña");
}; };
const mostrarAlertaLoginExitoso=(nomb)=>{ const mostrarAlertaLoginExitoso=(nomb)=>{
swal({ Swal.fire({
title: "Inicio de sesion Exitoso", title: "Inicio de sesion Exitoso",
text: "Bienvenido "+nomb+".", text: "Bienvenido "+nomb+".",
icon: "success", icon: "success",
@ -43,27 +38,30 @@ function LoginForm(props) {
} }
const mostrarAlertaLoginFallido=()=>{ const mostrarAlertaLoginFallido=()=>{
swal({ Swal.fire({
title: "Inicio de sesion fallido", title: "Inicio de sesion fallido",
text: "Usuario o Contraseña Incorrecta.", text: "Usuario o Contraseña Incorrecta.",
icon: "error", icon: "error",
button: "Aceptar" button: "Aceptar"
}); });
} }
const mostrarAlertaLoginSinDatos=()=>{ const mostrarAlertaLoginSinDatos=()=>{
swal({ Swal.fire({
title: "Inicio de sesion fallido", title: "Inicio de sesion fallido",
text: "Introduzca los datos que se le piden.", text: "Introduzca los datos que se le piden.",
icon: "error", icon: "error",
button: "Aceptar" button: "Aceptar"
}); });
} }
const loginUsuario = async (evento) => { const loginUsuario = async (evento) => {
evento.preventDefault(); evento.preventDefault();
try{ try{
const response = await axios.post('http://localhost/Login',{datosFormulario}) console.log(datosFormulario)
const response = await axios.post('http://localhost:4567/frontend/login',{datosFormulario})
console.log(response.data) console.log(response.data)
console.log("c = " +datosFormulario.correo+" p = "+datosFormulario.password) console.log("c = " +datosFormulario.correo+" p = "+datosFormulario.password)
if(datosFormulario.correo && datosFormulario.password){ if(datosFormulario.correo && datosFormulario.password){
@ -75,6 +73,8 @@ const loginUsuario = async (evento) => {
password: '' password: ''
}); });
} else { } else {
// Si la respuesta es 'Valido', puedes realizar las acciones deseadas // Si la respuesta es 'Valido', puedes realizar las acciones deseadas
@ -82,9 +82,9 @@ const loginUsuario = async (evento) => {
console.log(response.data.nombre); console.log(response.data.nombre);
mostrarAlertaLoginExitoso(response.data.nombre); mostrarAlertaLoginExitoso(response.data.nombre);
//abrirPopupV() //abrirPopupV()
} }
}else{ }else{
mostrarAlertaLoginSinDatos(); mostrarAlertaLoginSinDatos();
} }
@ -115,39 +115,49 @@ const cambiosFormulario = (evento) => {
} }
const redirectToHome = () => { const redirectToHome = () => {
// Redirige a la página del hotel cuando se hace clic en el botón
navigate("/"); navigate("/");
}; };
const redirectToRegistro = () => {
// Redirige a la página del hotel cuando se hace clic en el botón
navigate("/Registro");
};
return( return(
<> <>
<body className='body-login'> <div className="cuerpo">
<div className="wrapper"> <div className="wrapper">
<div className="form-box">
<div className="login-container" id="login" style={{ left: loginVisible ? '4px' : '-510px', opacity: loginVisible ? 1 : 0 }}>
<form> <form>
<div className="top">
<span>No tienes cuenta? <a href="" onClick={redirectToRegister}>Registrate</a></span> <div className="boton1">
<header className='header-login'>Inicia Sesión</header> <button type="button" className="button first-button" onClick={redirectToHome}>
<span className="button-text"></span>
<FaHome />
</button>
</div>
<h1>Inicio</h1>
<div className="input-box">
<input type="text" placeholder="Correo" onChange={cambiosFormulario} name="correo" value={datosFormulario.correo}/>
<FaUser className="icon"/>
</div> </div>
<div className="input-box"> <div className="input-box">
<input type="text" className="input-field" placeholder="Correo" onChange={cambiosFormulario} name="correo" value={datosFormulario.correo}/> <input type="password" placeholder="Contraseña" onChange={cambiosFormulario} name="password" value={datosFormulario.password}/>
<i className="bx bx-user"></i> <FaLock className="icon"/>
</div> </div>
<div className="input-box"> <div className="remember-forgot">
<input type="password" className="input-field" placeholder="Contraseña" onChange={cambiosFormulario} name="password" value={datosFormulario.password}/> <label><input type="checkbox" />Recuerdame</label>
<i className="bx bx-lock-alt"></i> <a href="#" onClick={redirectToRecuperarContraseña} >¿Contraseña olvidada?</a>
</div>
<div className="input-box">
<button type="button" className="submit" onClick={loginUsuario} disabled={Cargando}>Entrar</button>
</div>
<div className="two-col">
<div className="one">
<input type="checkbox" id="login-check" />
<label htmlFor="login-check"> Recuerdame</label>
</div>
<div className="two">
<span><a href="" onClick={redirectToRecuperarContra}>Olvidaste la contraseña?</a></span>
</div> </div>
<button className="Entrar" onClick={loginUsuario} disabled={Cargando}>Entrar</button>
<div className="register-link">
<p>¿No tienes una cuenta? <a href="" onClick={redirectToRegistro}>Register </a></p>
</div> </div>
<Box m={5}> <Box m={5}>
{mostrarPopupV && <PopupV nombre ={nombre} onClose={() => setMostrarPopupV(false)} />} {mostrarPopupV && <PopupV nombre ={nombre} onClose={() => setMostrarPopupV(false)} />}
@ -158,10 +168,9 @@ const redirectToHome = () => {
</form> </form>
</div> </div>
</div> </div>
</div>
</body>
</> </>
); )
} }
export default LoginForm; export default LoginForm;

143
frontend/src/Sesion/Recuperar.css Normal file
View File

@ -0,0 +1,143 @@
.wrapper{
width: 450px;
background: transparent;
border: 2px solid rgba(255, 255, 255, .2);
backdrop-filter: blur(50px);
box-shadow: 0 0 10px rgba(0, 0, 0, .2);
color: #fff;
border-radius: 20px;
padding: 50px 30px;
}
.wrapper h1{
font-size: 36px;
text-align: center;
}
.wrapper .label-correo {
margin-top: 10px;
margin-left: 10px; /* Puedes ajustar este valor según sea necesario */
margin-bottom: -20px; /* Puedes ajustar este valor según sea necesario */
display: block; /* Asegura que el label se comporte como un bloque */
font-size: 16px;
}
.wrapper .input-box{
position: relative;
width: 100%;
height: 50px;
margin: 30px 0;
}
.input-box input{
width: 100%;
height: 100%;
background: transparent;
border: 2px solid rgba(255, 255, 255, .2);
outline: none;
border-radius: 40px;
font-size: 16px;
color: #fff;
padding: 20px 45px 20px 20px;
}
.input-box input::placeholder{
color: #fff;
}
.input-box .icon{
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
font-size: 16px;
}
.wrapper .remember-forgot{
display: flex;
justify-content: space-between;
font-size: 14.5px;
margin: -15px 0 15px;
}
.remember-forgot label input{
accent-color: #fff;
margin-right: 4px;
}
.remember-forgot a{
color: #fff;
text-decoration: none;
}
.remember-forgot a:hover{
text-decoration: underline;
}
.wrapper .boton1{
display: inline-block;
position: absolute;
background-color: none;
top: 20px;
left: 10px;
width: 45px;
height: 35px;
padding: 0px;
padding-left: 0px;
padding-right: 0px;
font-size: 14px;
}
.wrapper button{
width: 100%;
height: 45px;
background: #fff;
border: none;
outline: none;
border-radius: 40px;
box-shadow: 0 0 10px rgba(0, 0, 0, .1);
cursor: pointer;
font-size: 16px;
color: #333;
font-weight: 700;
}
.wrapper .register-link{
font-size: 14.5px;
text-align: center;
margin: 20px 0 15px;
}
.register-link p a{
color: #fff;
text-decoration: none;
font-weight: 600;
}
.register-link p a:hover {
text-decoration: underline;
}
.cuerpo {
width: 135.1%;
background-repeat: no-repeat;
height: 100%;
padding-left: 0%;
background-size: 100% auto;
margin:0;
font-family: 'Poppins', sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-position: center;
}
.cuerpo {
transform: translateX(-361px);
}
.label-correo.desactivado {
color: #999; /* Color de texto desactivado */
}
.input-box.desactivado {
background-color: gray; /* Color de fondo desactivado */
border: 2px solid #ccc; /* Borde desactivado */
border-radius: 30px;
}

210
frontend/src/Sesion/Recuperar/Recuperar.css Normal file
View File

@ -0,0 +1,210 @@
/* POPPINS FONT */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');
.body-login{
background: url("/src/assets/fondo_pasteles.jpg");
background-size: 100%;
background-repeat: no-repeat;
overflow: hidden;
background-attachment: fixed;
display: flex;
height: 100%;
position: relative;
justify-content: center;
margin: 0;
padding: 0;
}
.wrapper{
display: flex;
width: 40%;
height: 100vh;
padding-left: 4px;
align-items: center;
justify-content: center;
}
.link:hover, .active{
border-bottom: 2px solid #fff;
}
.btn:hover{
background: rgba(255, 255, 255, 0.3);
}
#registerBtn{
margin-left: 15px;
}
.btn.white-btn{
background: rgba(255, 255, 255, 0.7);
}
.btn.btn.white-btn:hover{
background: rgba(255, 255, 255, 0.5);
}
.form-box{
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 512px;
height: 500px;
overflow: hidden;
z-index: 2;
border-radius: 4%;
background: rgba(39, 39, 39, 0.5);
}
.login-container{
position: absolute;
left: 4px;
width: 500px;
opacity: 1;
display: flex;
flex-direction: column;
transition: .5s ease-in-out;
}
.register-container{
position: absolute;
right: -520px;
width: 500px;
display: flex;
flex-direction: column;
transition: .5s ease-in-out;
gap: 7px;
}
.password-container{
position: absolute;
right: -520px;
width: 500px;
display: flex;
flex-direction: column;
transition: .5s ease-in-out;
gap: 7px;
}
.top span{
color: #fff;
font-size: small;
padding: 10px 0;
display: flex;
justify-content: center;
}
.top2 span{
color: #fff;
font-size: small;
padding: 10px 0;
display: flex;
justify-content: center;
}
.two span a{
font-weight: 500;
color: #fff;
margin-left: 5px;
}
.top span a{
font-weight: 500;
color: #fff;
margin-left: 5px;
}
.top2 span a{
font-weight: 500;
color: #fff;
margin-left: 5px;
}
.header-login{
color: #fff;
font-size: 30px;
text-align: center;
padding: 10px 0 30px 0;
}
.two-forms{
display: flex;
gap: 20px;
}
.input-field{
font-size: 15px;
background: rgba(255, 255, 255, 0.2);
color: #fff;
height: 50px;
width: 100%;
padding: 0 10px 0 45px;
border: none;
border-radius: 30px;
outline: none;
transition: .2s ease;
margin-bottom: 10px; /*para separar los componentes agregando un margen por debajo*/
}
.input-field:hover, .input-field:focus{
background: rgba(255, 255, 255, 0.25);
}
::-webkit-input-placeholder{
color: #fff;
}
.input-box i{
position: relative;
margin-top: 10px;
margin-bottom: 10px;
top: -35px;
left: 17px;
color: #fff;
}
.input-box i{
position: relative;
margin-top: 10px;
margin-bottom: 10px;
top: -35px;
left: 17px;
color: #fff;
}
.submit{
font-size: 15px;
font-weight: 500;
color: black;
height: 45px;
width: 100%;
border: none;
border-radius: 30px;
outline: none;
background: rgba(255, 255, 255, 0.7);
cursor: pointer;
transition: .3s ease-in-out;
}
.submit:hover{
background: rgba(255, 255, 255, 0.5);
box-shadow: 1px 5px 7px 1px rgba(0, 0, 0, 0.2);
}
.two-col{
display: flex;
justify-content: space-between;
color: #fff;
font-size: small;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 10px;
}
.two-col .one{
display: flex;
gap: 5px;
}
.two label a{
text-decoration: none;
color: #fff;
}
.two label a:hover{
text-decoration: underline;
}
@media only screen and (max-width: 540px) {
.wrapper{
min-height: 100vh;
}
.form-box{
width: 100%;
height: 500px;
}
.register-container, .login-container{
width: 100%;
padding: 0 20px;
}
.register-container .two-forms{
flex-direction: column;
gap: 0;
}
}

196
frontend/src/Sesion/RecuperarContraForm.jsx
View File

@ -1,59 +1,193 @@
import React, { useState } from 'react'; import React, { useState } from "react";
import './LoginForm.css'; import './Recuperar.css';
import { redirect } from 'react-router-dom'; import { FaUser, FaLock, FaHome } from "react-icons/fa";
import { TextField, Button, Box } from "@mui/material";
import axios from "axios"; import axios from "axios";
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
function RecuperarContraForm(props) { import PopupActualizar from "/src/Popups/PopupActualizar";
const navigate = useNavigate(); import PopupActualizarInv from "/src/Popups/PopupActualizarInv.jsx";
import PopupV from "/src/Popups/PopupLoginValido.jsx";
import PopupIv from "/src/Popups/PopupLoginInvalido.jsx";
import Swal from 'sweetalert2'
const [Cargando, setCargando] = useState(false) function RecuperarContra(props) {
const navigate = useNavigate();
const [Cargando, setCargando] = useState(false);
const [datosFormulario, setDatosFormulario] = useState({ const [datosFormulario, setDatosFormulario] = useState({
correo: '', correo: '',
password: '' password: ''
}) });
const [loginVisible, setLoginVisible] = useState(false); const mostrarAlertaCambioContraExitoso=()=>{
const [registerVisible, setRegisterVisible] = useState(false); Swal.fire({
const [passwordVisible, setPasswordVisible] = useState(true); title: "Cambio de contraseña",
text: "Credenciales actualizadas correctamenete",
icon: "success",
button: "Aceptar"
}).then(respuesta=>{
if(respuesta){
redirectToLogin();
}
})
}
const mostrarAlertaCambioContraFallido=()=>{
Swal.fire({
title: "Correo no encontrado",
text: "El correo que introdujo no existe o se escribio incorrectamente.",
icon: "error",
button: "Aceptar"
});
}
const [mostrarContraseña, setMostrarContraseña] = useState(false);
const [desactivarCorreo, setDesactivarCorreo] = useState(false);
const [cambio, setCambio] = useState(0);
const loginUsuario = async (evento) => {
evento.preventDefault();
if (cambio === 0) {
try {
const response = await axios.post('http://localhost:4567/frontend/RecuperarContra', { datosFormulario });
console.log(response.data);
if (response.data === 'Usuario encontrado') {
console.log("Si se encontró");
setMostrarContraseña(true);
setDesactivarCorreo(true);
setCambio(1);
} else {
console.log("No se encontró");
mostrarAlertaCambioContraFallido();
}
return response.data;
} catch (error) {
throw error;
}
} else {
try{
const response = await axios.post('http://localhost:4567/frontend/ColocarContra2', { datosFormulario });
console.log(response.data);
console.log(datosFormulario);
mostrarAlertaCambioContraExitoso();
}catch(error){
throw error;
}
}
};
const [nombre, setNombre] = useState('');
const [mostrarPopupActualizarInv, setMostrarPopupActualizarInv]= useState(false);
const abrirPopupActualizarInv = () =>{
setMostrarPopupActualizarInv(true);
};
const [mostrarPopupVeri, setMostrarPopupVeri]= useState(false);
const abrirPopupVeri = () =>{
setMostrarPopupVeri(true);
};
const [mostrarPopupV, setMostrarPopupV] = useState(false);
const abrirPopupV = () => {
setMostrarPopupV(true);
};
const [mostrarPopupIv, setMostrarPopupIv] = useState(false);
const abrirPopupIv = () => {
setMostrarPopupIv(true);
};
const cambiosFormulario = (evento) => {
const { name, value } = evento.target;
setDatosFormulario({ ...datosFormulario, [name]: value });
setMostrarPopupActualizarInv(false);
};
const redirectToHome = () => {
navigate("/");
};
const redirectToLogin = () => { const redirectToLogin = () => {
// Redirige a la página del hotel cuando se hace clic en el botón
navigate("/Login"); navigate("/Login");
}; };
return ( return (
<> <>
<body className='body-login'> <div className="cuerpo">
<div className="wrapper"> <div className="wrapper">
<div className="form-box">
<div className="password-container" id="password" style={{ right: loginVisible || registerVisible ? '-520px' : '5px', opacity: loginVisible || registerVisible ? 0 : 1 }}>
<form> <form>
<div className="top2"> <div className="boton1">
<span>Ya tienes cuenta? <a href="" onClick={redirectToLogin}>Inicia Sesión</a></span> <button type="button" className="button first-button" onClick={redirectToHome}>
<header className='header-login'>Recuperar Contraseña</header> <span className="button-text"></span>
<FaHome />
</button>
</div> </div>
<h1>Recuperar Contraseña</h1>
<label htmlFor="correo" className={`label-correo ${desactivarCorreo ? 'desactivado' : ''}`}>Ingrese su correo:</label>
<div className={`input-box ${desactivarCorreo ? 'desactivado' : ''}`}>
<input
type="text"
placeholder="Correo"
onChange={cambiosFormulario}
name="correo"
value={datosFormulario.correo}
disabled={desactivarCorreo}
/>
<FaUser className="icon" />
</div>
{mostrarContraseña && (
<div>
<label htmlFor="contraseña" className="label-correo">Nueva contraseña:</label>
<div className="input-box"> <div className="input-box">
<input type="text" className="input-field" placeholder="Correo" /> <input
<i className="bx bx-envelope"></i> type="password"
placeholder="Contraseña"
onChange={cambiosFormulario}
name="password"
value={datosFormulario.password}
/>
<FaLock className="icon" />
</div> </div>
<div className="input-box">
<input type="password" className="input-field" placeholder="Nueva contraseña" />
<i className="bx bx-lock-alt"></i>
</div>
<div className="input-box">
{/*<input type="submit" className="submit" value="Cambiar contraseña" />*/}
<button type="button" className="submit">Cambiar contraseña</button>
</div> </div>
)}
<button className="Entrar" onClick={loginUsuario} disabled={Cargando}>
Entrar
</button>
<Box m={5}>
{mostrarPopupV && <PopupV nombre={nombre} onClose={() => setMostrarPopupV(false)} />}
</Box>
<Box m={5}>
{mostrarPopupIv && <PopupIv nombre={nombre} onClose={() => setMostrarPopupIv(false)} />}
</Box>
<Box m={5}>
{mostrarPopupVeri && <PopupActualizar nombre={nombre} onClose={() => setMostrarPopupVeri(false)} />}
</Box>
<Box m={5}>
{mostrarPopupActualizarInv && <PopupActualizarInv nombre={nombre} onClose={() => setMostrarPopupActualizarInv(false)} />}
</Box>
</form> </form>
</div> </div>
</div> </div>
</div>
</body>
</> </>
); );
} }
export default RecuperarContraForm; export default RecuperarContra;

77
frontend/src/Sesion/RegisterForm.jsx
View File

@ -1,77 +0,0 @@
import React, { useState } from 'react';
import './LoginForm.css';
import { redirect } from 'react-router-dom';
import axios from "axios";
import { useNavigate } from "react-router-dom";
function RegisterForm(props) {
const navigate = useNavigate();
const [Cargando, setCargando] = useState(false)
const [datosFormulario, setDatosFormulario] = useState({
nombre: '',
apellido: '',
correo: '',
password: ''
})
const [loginVisible, setLoginVisible] = useState(false);
const [registerVisible, setRegisterVisible] = useState(true);
const [passwordVisible, setPasswordVisible] = useState(false);
const redirectToLogin = () => {
navigate("/Login");
};
return (
<>
<body className='body-login'>
<div className="wrapper">
<div className="form-box">
<div className="register-container" id="register" style={{ right: loginVisible || passwordVisible ? '-520px' : '5px', opacity: loginVisible || passwordVisible ? 0 : 1 }}>
<form>
<div className="top">
<span>Ya tienes cuenta? <a href="" onClick={redirectToLogin}>Inicia Sesión</a></span>
<header className='header-login'>Registrarse</header>
</div>
<div className="two-forms">
<div className="input-box">
<input type="text" className="input-field" placeholder="Nombre" />
<i className="bx bx-user"></i>
</div>
<div className="input-box">
<input type="text" className="input-field" placeholder="Apellido" />
<i className="bx bx-user"></i>
</div>
</div>
<div className="input-box">
<input type="text" className="input-field" placeholder="Correo" />
<i className="bx bx-envelope"></i>
</div>
<div className="input-box">
<input type="password" className="input-field" placeholder="Contraseña" />
<i className="bx bx-lock-alt"></i>
</div>
<div className="input-box">
{/*<input type="submit" className="submit" value="Registrarse"/>*/}
<button type="button" className="submit">Registrarse</button>
</div>
<div className="two-col">
<div className="one">
<input type="checkbox" id="register-check" />
<label htmlFor="register-check"> Recuerdame</label>
</div>
</div>
</form>
</div>
</div>
</div>
</body>
</>
);
}
export default RegisterForm;

183
frontend/src/Sesion/Registrar.jsx Normal file
View File

@ -0,0 +1,183 @@
import React, { useState } from "react";
import './LoginForm.css';
import { FaUser, FaLock, FaHome } from "react-icons/fa";
import { TextField, Button, Box } from "@mui/material";
import axios from "axios";
import { useNavigate } from "react-router-dom";
import Swal from 'sweetalert2'
import PopupRegistro from "/src/Popups/PopupRegistro.jsx";
import PopupRegistroS from "/src/Popups/PopupRsindatos.jsx";
function Registrar(props){
const navigate = useNavigate();
const [Cargando, setCargando] = useState(false)
const [datosFormulario, setDatosFormulario] = useState(
{correo: '',
password: '',
nombre: ''
});
const mostrarAlertaRegistroFallido=()=>{
Swal.fire({
title: "Registro Fallido",
text: "Introduzca los datos para poder registrarse.",
icon: "error",
button: "Aceptar"
});
}
const mostrarAlertaRegistroExitoso=()=>{
Swal.fire({
title: "Registro Exitoso",
text: "Usuario registrado correctamente.",
icon: "success",
button: "Aceptar"
});
}
const mostrarAlertaCorreoExistente=()=>{
//console.log(datosFormulario.correo);
Swal.fire({
title: "Registro Fallido",
text: "El correo "+datosFormulario.correo+" ya ha sido registrado",
icon: "error",
button: "Aceptar"
});
}
const registrarUsuario = async (evento) => {
evento.preventDefault();
try{
if(datosFormulario.correo && datosFormulario.password && datosFormulario.nombre) {
const response2 = await axios.post('http://localhost:4567/frontend/correoExiste',{datosFormulario})
console.log(response2.data);
const res = response2.data;
console.log("res: "+res);
// Verificar si el correo existe
if (res.correoExistente) {
// Hacer algo si el correo existe
mostrarAlertaCorreoExistente();
setDatosFormulario({
correo: '',
password: '',
nombre: ''
});
} else {
// Hacer algo en caso de que el correo no existe
const response = await axios.post('http://localhost:4567/frontend/',{datosFormulario})
console.log(response.data)
mostrarAlertaRegistroExitoso();
setDatosFormulario({
correo: '',
password: '',
nombre: ''
});
return response.data
}
}else{
console.log("si entro");
mostrarAlertaRegistroFallido();
setDatosFormulario({
correo: '',
password: '',
nombre: ''
});
return;
}
} catch(error){
throw error
}
}
const [mostrarPopupR, setMostrarPopupR] = useState(false);
const abrirPopupR = () => {
setMostrarPopupR(true);
};
const [mostrarPopupRs, setMostrarPopupRs] = useState(false);
const abrirPopupRs = () => {
setMostrarPopupRs(true);
};
const cambiosFormulario = (evento) => {
//console.log(evento.target)
const {name,value} = evento.target
setDatosFormulario ({...datosFormulario, [name]: value})
setMostrarPopupR(false);
}
const redirectToHome = () => {
// Redirige a la página del hotel cuando se hace clic en el botón
navigate("/");
};
const redirectToLogin = () => {
// Redirige a la página del hotel cuando se hace clic en el botón
navigate("/Login");
};
return(
<>
<div className="cuerpo">
<div className="wrapper">
<form>
<div className="boton1">
<button type="button" className="button first-button" onClick={redirectToHome}>
<span className="button-text"></span>
<FaHome />
</button>
</div>
<h1>Registro</h1>
<div className="input-box">
<input type="text" placeholder="Correo" onChange={cambiosFormulario} name="correo" value={datosFormulario.correo}/>
<FaUser className="icon"/>
</div>
<div className="input-box">
<input type="password" placeholder="Contraseña" onChange={cambiosFormulario} name="password" value={datosFormulario.password}/>
<FaLock className="icon"/>
</div>
<div className="input-box">
<input type="text" placeholder="Nombre" onChange={cambiosFormulario} name="nombre" value={datosFormulario.nombre}/>
<FaUser className="icon"/>
</div>
<button className="Entrar" onClick={(evento) => registrarUsuario(evento)}>Registrar</button>
<div className="register-link">
<p>¿Tienes cuenta? <a href="" onClick={redirectToLogin}>Login</a></p>
</div>
<Box m={5}>
{mostrarPopupRs && <PopupRegistroS onClose={() => setMostrarPopupRs(false)} />}
</Box>
<Box m={5}>
{mostrarPopupR && <PopupRegistro onClose={() => setMostrarPopupR(false)} />}
</Box>
</form>
</div>
</div>
</>
)
}
export default Registrar;

2
frontend/src/assets/react.svg
View File

@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" className="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.0 KiB

After

Width:  |  Height:  |  Size: 4.0 KiB

5
frontend/src/main.jsx
View File

@ -1,12 +1,13 @@
import React from 'react'; import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'; import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import ReactDOM from 'react-dom';
import { createRoot } from 'react-dom/client'; import { createRoot } from 'react-dom/client';
import AppInicio from './AppInicio.jsx' import AppInicio from './AppInicio.jsx'
import PersPastel1 from './PersPastel1.jsx' import PersPastel1 from './PersPastel1.jsx'
import Pedidos from './Pedidos.jsx' import Pedidos from './Pedidos.jsx'
import Pasteles from './Pasteles.jsx' import Pasteles from './Pasteles.jsx'
import LoginForm from './Sesion/LoginForm.jsx'; import LoginForm from './Sesion/LoginForm.jsx';
import RegisterForm from './Sesion/RegisterForm.jsx'; import RegistrarForm from './Sesion/Registrar.jsx';
import RecuperarContraForm from './Sesion/RecuperarContraForm.jsx'; import RecuperarContraForm from './Sesion/RecuperarContraForm.jsx';
import ChocolateBlanco from './Pasteles/ChocolateBlanco.jsx'; import ChocolateBlanco from './Pasteles/ChocolateBlanco.jsx';
import PastelMoka from './Pasteles/PastelMoka.jsx'; import PastelMoka from './Pasteles/PastelMoka.jsx';
@ -24,7 +25,7 @@ createRoot(document.getElementById('root')).render(
<Route path = "/Pedidos" element = {<Pedidos/>}/> <Route path = "/Pedidos" element = {<Pedidos/>}/>
<Route path = "/Pasteles" element = {<Pasteles/>}/> <Route path = "/Pasteles" element = {<Pasteles/>}/>
<Route path = "/Login" element = {<LoginForm/>}/> <Route path = "/Login" element = {<LoginForm/>}/>
<Route path = "/Registro" element = {<RegisterForm/>}/> <Route path = "/Registro" element = {<RegistrarForm/>}/>
<Route path = "/RecuperarContraseña" element = {<RecuperarContraForm/>}/> <Route path = "/RecuperarContraseña" element = {<RecuperarContraForm/>}/>
<Route path = "/Pasteles/ChocolateBlanco" element = {<ChocolateBlanco/>}/> <Route path = "/Pasteles/ChocolateBlanco" element = {<ChocolateBlanco/>}/>
<Route path = "/Pasteles/PastelMoka" element = {<PastelMoka/>}/> <Route path = "/Pasteles/PastelMoka" element = {<PastelMoka/>}/>