Ultima Version sprint

This commit is contained in:
Cesar.Gomez 2024-05-12 20:01:33 -06:00
parent bbf03d60c3
commit cee8c4698f
12 changed files with 908 additions and 110 deletions

View File

@ -1163,7 +1163,7 @@ html {
} }
.enlaceNombre{ .enlaceNombre{
margin-left: 600px; margin-left: 500px;
} }

View File

@ -1,7 +1,7 @@
import React, {useEffect, useState} from "react"; import React, {useEffect, useState} from "react";
import viteLogo from '/vite.svg' import viteLogo from '/vite.svg'
import './Pasteles.css'
import { RiCustomerService2Fill } from "react-icons/ri"; import { RiCustomerService2Fill } from "react-icons/ri";
import { FaUser } from "react-icons/fa"; import { FaUser } from "react-icons/fa";
import { LuShoppingBasket } from "react-icons/lu"; import { LuShoppingBasket } from "react-icons/lu";
@ -21,11 +21,18 @@ 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 Swal from 'sweetalert2'
import axios from 'axios';
function AppPasteles() { function AppPasteles() {
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 // Redirige a la página del hotel cuando se hace clic en el botón
navigate("/PersonalizarPastel/PastelArcoiris"); navigate("/PersonalizarPastel/PastelArcoiris");
@ -75,43 +82,39 @@ function AppPasteles() {
navigate("/Pasteles/PastelCajeta") navigate("/Pasteles/PastelCajeta")
}; };
const [nombreUsuario, setNombreUsuario]=useState("");
const mostrarAlertaLogOut = () => { const mostrarAlertaLogOut = () => {
Swal.fire({ Swal.fire({
title: "Cerrar Sesion", title: "Cerrar Sesión",
text: "Seguro que quieres cerrar sesion", text: "¿Seguro que quieres cerrar sesión?",
icon: "warning", icon: "warning",
buttons: ["No","Si"] showCancelButton: true, // Mostrar el botón de cancelar
}).then(respuesta=>{ confirmButtonColor: "#3085d6", // Color del botón de confirmar
if(respuesta){ cancelButtonColor: "#d33", // Color del botón de cancelar
Swal.fire({text: "Sesion cerrada correctamente. Adios "+nombreUsuario+"", confirmButtonText: "Sí", // Texto del botón de confirmar
icon: "success" 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(); cerrarSesion();
} }
}) });
} };
const [nombreUsuario, setNombreUsuario]=useState("");
const obtenerNombreUsuario = async () => { const obtenerNombreUsuario = async () => {
try { try {
// Realizar la llamada al backend para obtener el nombre del usuario // Realizar la llamada al backend para obtener el nombre del usuario
const response = await axios.post('http://localhost:4567/frontend/obtenerUsuario'); const response = await axios.post('http://localhost:4567/frontend/obtenerUsuario', { datosFormulario });
setNombreUsuario(response.data.nombre); setNombreUsuario(response.data.nombre);
} catch (error) { console.log(nombreUsuario);
// 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) { } catch (error) {
// Manejar el error según tus necesidades // Manejar el error según tus necesidades
console.error("Error al obtener el nombre del usuario", error); console.error("Error al obtener el nombre del usuario", error);
@ -123,6 +126,20 @@ function AppPasteles() {
obtenerNombreUsuario(); 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>
@ -165,11 +182,11 @@ function AppPasteles() {
<li><a href="#">Blog</a></li> <li><a href="#">Blog</a></li>
{nombreUsuario ? ( {nombreUsuario ? (
<> <>
<li className="enlace"><a href="#">{nombreUsuario}</a></li> <li className="enlaceNombre"><a href="#">{nombreUsuario}</a></li>
<li className="enlace"><a href="#" onClick={mostrarAlertaLogOut}>Cerrar Sesión</a></li> <li className="enlaceNombre2"><a href="#" onClick={mostrarAlertaLogOut}>Cerrar Sesión</a></li>
</> </>
) : ( ) : (
<li className="enlace"><a href="#" onClick={redirectToLogin}>Iniciar Sesión</a></li> <li className="enlaceNombre2"><a href="#" onClick={redirectToLogin}>Iniciar Sesión</a></li>
) )
} }

View File

@ -1,4 +1,4 @@
import React, { useState } from "react"; import React, {useEffect, useState} from "react";
import { RiCustomerService2Fill } from "react-icons/ri"; import { RiCustomerService2Fill } from "react-icons/ri";
import { FaUser } from "react-icons/fa"; import { FaUser } from "react-icons/fa";
@ -9,11 +9,19 @@ 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 './ChocolateBlanco.css'; import './ChocolateBlanco.css';
import Swal from 'sweetalert2'
import axios from 'axios';
function ChocolateBlanco() { function ChocolateBlanco() {
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 // Redirige a la página del hotel cuando se hace clic en el botón
navigate("/PersonalizarPastel/PastelArcoiris"); navigate("/PersonalizarPastel/PastelArcoiris");
@ -33,6 +41,120 @@ function ChocolateBlanco() {
navigate("/"); navigate("/");
}; };
const redirectToLogin = () => {
navigate("/Login");
};
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);
} 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);
}
};
const mostrarAlertaReservaFallidaPers=()=>{
Swal.fire({
title: "Pedidos Info",
text: "No se encuentra disponible.",
icon: "info",
button: "Aceptar"
});
};
const mostrarAlertaReservaExitosa=()=>{
Swal.fire({
title: "Pedido Exitosa",
text: "Tu Pedido se ha realizado correctamente.",
icon: "success",
button: "Aceptar"
});
};
const hacerPedidoPastel1 = async () => {
try{
if(nombreUsuario==null){
mostrarAlertaPedidoFallidaLogin();
}else{
const response = await axios.post('http://localhost:4567/frontend/hacerPedidoPastel1', {
textoEncima: "",
textoCantidad: "8",
textoRelleno: "Confetti cake",
textoTipo: "Pastel Chocolate Blanco",
textoPrecio:"603",
idPastel: "2"
});
mostrarAlertaReservaExitosa();
}
}catch(error){
console.error("Error al hace el pedido");
throw error;
}
};
return ( return (
<> <>
@ -76,6 +198,15 @@ function ChocolateBlanco() {
<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 className="search-form"> <form className="search-form">
@ -108,6 +239,8 @@ function ChocolateBlanco() {
<h2 className="textPersPastel">Tamaño:</h2><p className="pastel-Type1"><strong>Grande</strong></p> <h2 className="textPersPastel">Tamaño:</h2><p className="pastel-Type1"><strong>Grande</strong></p>
<h2 className="textPersPastel">Relleno:</h2><p className="pastel-Type1"><strong>Confetti cake</strong></p>
<div className="mb-4"> <div className="mb-4">
</div> </div>
<div className="mb-6"> <div className="mb-6">
@ -118,7 +251,7 @@ function ChocolateBlanco() {
</div> </div>
<div className="container-add-cart"> <div className="container-add-cart">
<button className="btn-add-to-cart"> <button className="btn-add-to-cart" onClick={hacerPedidoPastel1}>
<i className="fa-solid fa-plus"></i> <i className="fa-solid fa-plus"></i>
Comprar Comprar
</button> </button>

View File

@ -1,4 +1,4 @@
import React, { useState } from "react"; import React, {useEffect, useState} from "react";
import { RiCustomerService2Fill } from "react-icons/ri"; import { RiCustomerService2Fill } from "react-icons/ri";
import { FaUser } from "react-icons/fa"; import { FaUser } from "react-icons/fa";
@ -9,10 +9,16 @@ 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 './ChocolateBlanco.css'; import './ChocolateBlanco.css';
import Swal from 'sweetalert2'
import axios from 'axios';
function PastelCajeta() { function PastelCajeta() {
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 // Redirige a la página del hotel cuando se hace clic en el botón
@ -32,9 +38,123 @@ function PastelCajeta() {
// Redirige a la página del hotel cuando se hace clic en el botón // Redirige a la página del hotel cuando se hace clic en el botón
navigate("/"); navigate("/");
}; };
const redirectToLogin = () => {
navigate("/Login");
};
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);
} 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);
}
};
const mostrarAlertaReservaFallidaPers=()=>{
Swal.fire({
title: "Pedidos Info",
text: "No se encuentra disponible.",
icon: "info",
button: "Aceptar"
});
};
const mostrarAlertaReservaExitosa=()=>{
Swal.fire({
title: "Pedido Exitosa",
text: "Tu Pedido se ha realizado correctamente.",
icon: "success",
button: "Aceptar"
});
};
const hacerPedidoPastel1 = async () => {
try{
if(nombreUsuario==null){
mostrarAlertaPedidoFallidaLogin();
}else{
const response = await axios.post('http://localhost:4567/frontend/hacerPedidoPastel1', {
textoEncima: "",
textoCantidad: "8",
textoRelleno: "Chocolate Fudge Cake",
textoTipo: "Pastel Cajeta",
textoPrecio:"390",
idPastel: "3"
});
mostrarAlertaReservaExitosa();
}
}catch(error){
console.error("Error al hace el pedido");
throw error;
}
};
return ( return (
<> <>
@ -77,6 +197,15 @@ function PastelCajeta() {
<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 className="search-form"> <form className="search-form">
@ -109,6 +238,8 @@ function PastelCajeta() {
<h2 className="textPersPastel">Tamaño:</h2><p className="pastel-Type1"><strong>Mediano</strong></p> <h2 className="textPersPastel">Tamaño:</h2><p className="pastel-Type1"><strong>Mediano</strong></p>
<h2 className="textPersPastel">Relleno:</h2><p className="pastel-Type1"><strong>Chocolate Fudge Cake</strong></p>
<div className="mb-4"> <div className="mb-4">
</div> </div>
<div className="mb-6"> <div className="mb-6">
@ -119,7 +250,7 @@ function PastelCajeta() {
</div> </div>
<div className="container-add-cart"> <div className="container-add-cart">
<button className="btn-add-to-cart"> <button className="btn-add-to-cart" onClick={hacerPedidoPastel1}>
<i className="fa-solid fa-plus"></i> <i className="fa-solid fa-plus"></i>
Comprar Comprar
</button> </button>
@ -157,16 +288,7 @@ function PastelCajeta() {
</div> </div>
</div> </div>
<div className="container-social">
<span>Compartir</span>
<div className="container-buttons-social">
<a href="#"><i className="fa-solid fa-envelope"></i></a>
<a href="#"><i className="fa-brands fa-facebook"></i></a>
<a href="#"><i className="fa-brands fa-twitter"></i></a>
<a href="#"><i className="fa-brands fa-instagram"></i></a>
<a href="#"><i className="fa-brands fa-pinterest"></i></a>
</div>
</div>
</div> </div>
</main> </main>

View File

@ -1,4 +1,4 @@
import React, { useState } from "react"; import React, {useEffect, useState} from "react";
import { RiCustomerService2Fill } from "react-icons/ri"; import { RiCustomerService2Fill } from "react-icons/ri";
import { FaUser } from "react-icons/fa"; import { FaUser } from "react-icons/fa";
@ -9,16 +9,25 @@ 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 './ChocolateBlanco.css'; import './ChocolateBlanco.css';
import Swal from 'sweetalert2'
import axios from 'axios';
function PastelChocolate() { function PastelChocolate() {
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 // Redirige a la página del hotel cuando se hace clic en el botón
navigate("/PersonalizarPastel/PastelArcoiris"); navigate("/PersonalizarPastel/PastelArcoiris");
}; };
const redirectToPedidos = () => { const redirectToPedidos = () => {
navigate("/Pedidos"); navigate("/Pedidos");
@ -34,6 +43,121 @@ function PastelChocolate() {
}; };
const redirectToLogin = () => {
navigate("/Login");
};
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);
} 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);
}
};
const mostrarAlertaReservaFallidaPers=()=>{
Swal.fire({
title: "Pedidos Info",
text: "No se encuentra disponible.",
icon: "info",
button: "Aceptar"
});
};
const mostrarAlertaReservaExitosa=()=>{
Swal.fire({
title: "Pedido Exitosa",
text: "Tu Pedido se ha realizado correctamente.",
icon: "success",
button: "Aceptar"
});
};
const hacerPedidoPastel1 = async () => {
try{
if(nombreUsuario==null){
mostrarAlertaPedidoFallidaLogin();
}else{
const response = await axios.post('http://localhost:4567/frontend/hacerPedidoPastel1', {
textoEncima: "",
textoCantidad: "8",
textoRelleno: "Chocolate Fudge Cake",
textoTipo: "Pastel de Chocolate",
textoPrecio:"350",
idPastel: "5"
});
mostrarAlertaReservaExitosa();
}
}catch(error){
console.error("Error al hace el pedido");
throw error;
}
};
return ( return (
<> <>
@ -76,7 +200,15 @@ function PastelChocolate() {
<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>
@ -109,6 +241,8 @@ function PastelChocolate() {
<h2 className="textPersPastel">Precio:</h2><p className="pastel-Type1"><strong>$350</strong></p> <h2 className="textPersPastel">Precio:</h2><p className="pastel-Type1"><strong>$350</strong></p>
<h2 className="textPersPastel">Tamaño:</h2><p className="pastel-Type1"><strong>Mediano</strong></p> <h2 className="textPersPastel">Tamaño:</h2><p className="pastel-Type1"><strong>Mediano</strong></p>
<h2 className="textPersPastel">Relleno:</h2><p className="pastel-Type1"><strong>Chocolate Fudge Cake</strong></p>
<div className="mb-4"> <div className="mb-4">
@ -121,7 +255,7 @@ function PastelChocolate() {
</div> </div>
<div className="container-add-cart"> <div className="container-add-cart">
<button className="btn-add-to-cart"> <button className="btn-add-to-cart" onClick={hacerPedidoPastel1}>
<i className="fa-solid fa-plus"></i> <i className="fa-solid fa-plus"></i>
Comprar Comprar
</button> </button>
@ -159,16 +293,7 @@ function PastelChocolate() {
</div> </div>
</div> </div>
<div className="container-social">
<span>Compartir</span>
<div className="container-buttons-social">
<a href="#"><i className="fa-solid fa-envelope"></i></a>
<a href="#"><i className="fa-brands fa-facebook"></i></a>
<a href="#"><i className="fa-brands fa-twitter"></i></a>
<a href="#"><i className="fa-brands fa-instagram"></i></a>
<a href="#"><i className="fa-brands fa-pinterest"></i></a>
</div>
</div>
</div> </div>
</main> </main>

View File

@ -1,4 +1,4 @@
import React, { useState } from "react"; import React, {useEffect, useState} from "react";
import { RiCustomerService2Fill } from "react-icons/ri"; import { RiCustomerService2Fill } from "react-icons/ri";
import { FaUser } from "react-icons/fa"; import { FaUser } from "react-icons/fa";
@ -9,10 +9,16 @@ 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 './ChocolateBlanco.css'; import './ChocolateBlanco.css';
import Swal from 'sweetalert2'
import axios from 'axios';
function PastelFrambuesa() { function PastelFrambuesa() {
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 // Redirige a la página del hotel cuando se hace clic en el botón
@ -33,7 +39,121 @@ function PastelFrambuesa() {
navigate("/"); navigate("/");
}; };
const redirectToLogin = () => {
navigate("/Login");
};
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);
} 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);
}
};
const mostrarAlertaReservaFallidaPers=()=>{
Swal.fire({
title: "Pedidos Info",
text: "No se encuentra disponible.",
icon: "info",
button: "Aceptar"
});
};
const mostrarAlertaReservaExitosa=()=>{
Swal.fire({
title: "Pedido Exitosa",
text: "Tu Pedido se ha realizado correctamente.",
icon: "success",
button: "Aceptar"
});
};
const hacerPedidoPastel1 = async () => {
try{
if(nombreUsuario==null){
mostrarAlertaPedidoFallidaLogin();
}else{
const response = await axios.post('http://localhost:4567/frontend/hacerPedidoPastel1', {
textoEncima: "",
textoCantidad: "12",
textoRelleno: "Vanilla Rainbow Cake",
textoTipo: "Pastel Frambuesa",
textoPrecio:"500",
idPastel: "7"
});
mostrarAlertaReservaExitosa();
}
}catch(error){
console.error("Error al hace el pedido");
throw error;
}
};
return ( return (
<> <>
@ -76,6 +196,15 @@ function PastelFrambuesa() {
<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 className="search-form"> <form className="search-form">
@ -108,6 +237,8 @@ function PastelFrambuesa() {
<h2 className="textPersPastel">Tamaño:</h2><p className="pastel-Type1"><strong>Grande</strong></p> <h2 className="textPersPastel">Tamaño:</h2><p className="pastel-Type1"><strong>Grande</strong></p>
<h2 className="textPersPastel">Relleno:</h2><p className="pastel-Type1"><strong>Vanilla Rainbow Cake</strong></p>
<div className="mb-4"> <div className="mb-4">
</div> </div>
<div className="mb-6"> <div className="mb-6">
@ -118,7 +249,7 @@ function PastelFrambuesa() {
</div> </div>
<div className="container-add-cart"> <div className="container-add-cart">
<button className="btn-add-to-cart"> <button className="btn-add-to-cart" onClick={hacerPedidoPastel1}>
<i className="fa-solid fa-plus"></i> <i className="fa-solid fa-plus"></i>
Comprar Comprar
</button> </button>
@ -156,16 +287,7 @@ function PastelFrambuesa() {
</div> </div>
</div> </div>
<div className="container-social">
<span>Compartir</span>
<div className="container-buttons-social">
<a href="#"><i className="fa-solid fa-envelope"></i></a>
<a href="#"><i className="fa-brands fa-facebook"></i></a>
<a href="#"><i className="fa-brands fa-twitter"></i></a>
<a href="#"><i className="fa-brands fa-instagram"></i></a>
<a href="#"><i className="fa-brands fa-pinterest"></i></a>
</div>
</div>
</div> </div>
</main> </main>

View File

@ -1,4 +1,4 @@
import React, { useState } from "react"; import React, {useEffect, useState} from "react";
import { RiCustomerService2Fill } from "react-icons/ri"; import { RiCustomerService2Fill } from "react-icons/ri";
import { FaUser } from "react-icons/fa"; import { FaUser } from "react-icons/fa";
@ -8,12 +8,19 @@ 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 './ChocolateBlanco.css'; import Swal from 'sweetalert2'
import axios from 'axios';
function PastelMoka() { function PastelMoka() {
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 // Redirige a la página del hotel cuando se hace clic en el botón
navigate("/PersonalizarPastel/PastelArcoiris"); navigate("/PersonalizarPastel/PastelArcoiris");
@ -33,6 +40,121 @@ function PastelMoka() {
navigate("/"); navigate("/");
}; };
const redirectToLogin = () => {
navigate("/Login");
};
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);
} 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);
}
};
const mostrarAlertaReservaFallidaPers=()=>{
Swal.fire({
title: "Pedidos Info",
text: "No se encuentra disponible.",
icon: "info",
button: "Aceptar"
});
};
const mostrarAlertaReservaExitosa=()=>{
Swal.fire({
title: "Pedido Exitosa",
text: "Tu Pedido se ha realizado correctamente.",
icon: "success",
button: "Aceptar"
});
};
const hacerPedidoPastel1 = async () => {
try{
if(nombreUsuario==null){
mostrarAlertaPedidoFallidaLogin();
}else{
const response = await axios.post('http://localhost:4567/frontend/hacerPedidoPastel1', {
textoEncima: "",
textoCantidad: "8",
textoRelleno: "Vanilla Rainbow Cake",
textoTipo: "Pastel de Moka",
textoPrecio:"560",
idPastel: "4"
});
mostrarAlertaReservaExitosa();
}
}catch(error){
console.error("Error al hace el pedido");
throw error;
}
};
return ( return (
<> <>
@ -76,7 +198,15 @@ function PastelMoka() {
<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>
@ -110,6 +240,8 @@ function PastelMoka() {
<h2 className="textPersPastel">Tamaño:</h2><p className="pastel-Type1"><strong>Mediano</strong></p> <h2 className="textPersPastel">Tamaño:</h2><p className="pastel-Type1"><strong>Mediano</strong></p>
<h2 className="textPersPastel">Relleno:</h2><p className="pastel-Type1"><strong>Vanilla Rainbow Cake</strong></p>
<div className="mb-4"> <div className="mb-4">
@ -122,7 +254,7 @@ function PastelMoka() {
</div> </div>
<div className="container-add-cart"> <div className="container-add-cart">
<button className="btn-add-to-cart"> <button className="btn-add-to-cart" onClick={hacerPedidoPastel1}>
<i className="fa-solid fa-plus"></i> <i className="fa-solid fa-plus"></i>
Comprar Comprar
</button> </button>
@ -160,16 +292,6 @@ function PastelMoka() {
</div> </div>
</div> </div>
<div className="container-social">
<span>Compartir</span>
<div className="container-buttons-social">
<a href="#"><i className="fa-solid fa-envelope"></i></a>
<a href="#"><i className="fa-brands fa-facebook"></i></a>
<a href="#"><i className="fa-brands fa-twitter"></i></a>
<a href="#"><i className="fa-brands fa-instagram"></i></a>
<a href="#"><i className="fa-brands fa-pinterest"></i></a>
</div>
</div>
</div> </div>
</main> </main>

View File

@ -1,4 +1,4 @@
import React, { useState } from "react"; import React, {useEffect, useState} from "react";
import { RiCustomerService2Fill } from "react-icons/ri"; import { RiCustomerService2Fill } from "react-icons/ri";
import { FaUser } from "react-icons/fa"; import { FaUser } from "react-icons/fa";
@ -9,10 +9,17 @@ 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 './ChocolateBlanco.css'; import './ChocolateBlanco.css';
import Swal from 'sweetalert2'
import axios from 'axios';
function PastelZanahoria() { function PastelZanahoria() {
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 // Redirige a la página del hotel cuando se hace clic en el botón
@ -33,6 +40,121 @@ function PastelZanahoria() {
navigate("/"); navigate("/");
}; };
const redirectToLogin = () => {
navigate("/Login");
};
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);
} 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);
}
};
const mostrarAlertaReservaFallidaPers=()=>{
Swal.fire({
title: "Pedidos Info",
text: "No se encuentra disponible.",
icon: "info",
button: "Aceptar"
});
};
const mostrarAlertaReservaExitosa=()=>{
Swal.fire({
title: "Pedido Exitosa",
text: "Tu Pedido se ha realizado correctamente.",
icon: "success",
button: "Aceptar"
});
};
const hacerPedidoPastel1 = async () => {
try{
if(nombreUsuario==null){
mostrarAlertaPedidoFallidaLogin();
}else{
const response = await axios.post('http://localhost:4567/frontend/hacerPedidoPastel1', {
textoEncima: "",
textoCantidad: "8",
textoRelleno: "Vanilla Rainbow Cake",
textoTipo: "Pastel de Zanahoria",
textoPrecio:"450",
idPastel: "6"
});
mostrarAlertaReservaExitosa();
}
}catch(error){
console.error("Error al hace el pedido");
throw error;
}
};
return ( return (
<> <>
@ -76,6 +198,15 @@ function PastelZanahoria() {
<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 className="search-form"> <form className="search-form">
@ -108,6 +239,9 @@ function PastelZanahoria() {
<h2 className="textPersPastel">Tamaño:</h2><p className="pastel-Type1"><strong>Chico</strong></p> <h2 className="textPersPastel">Tamaño:</h2><p className="pastel-Type1"><strong>Chico</strong></p>
<h2 className="textPersPastel">Relleno:</h2><p className="pastel-Type1"><strong>Vanilla Rainbow Cake</strong></p>
<div className="mb-4"> <div className="mb-4">
</div> </div>
<div className="mb-6"> <div className="mb-6">
@ -118,7 +252,7 @@ function PastelZanahoria() {
</div> </div>
<div className="container-add-cart"> <div className="container-add-cart">
<button className="btn-add-to-cart"> <button className="btn-add-to-cart" onClick={hacerPedidoPastel1}>
<i className="fa-solid fa-plus"></i> <i className="fa-solid fa-plus"></i>
Comprar Comprar
</button> </button>
@ -156,16 +290,7 @@ function PastelZanahoria() {
</div> </div>
</div> </div>
<div className="container-social">
<span>Compartir</span>
<div className="container-buttons-social">
<a href="#"><i className="fa-solid fa-envelope"></i></a>
<a href="#"><i className="fa-brands fa-facebook"></i></a>
<a href="#"><i className="fa-brands fa-twitter"></i></a>
<a href="#"><i className="fa-brands fa-instagram"></i></a>
<a href="#"><i className="fa-brands fa-pinterest"></i></a>
</div>
</div>
</div> </div>
</main> </main>

View File

@ -3,7 +3,13 @@ import { useState, useEffect } from 'react';
import './Pedidos.css'; import './Pedidos.css';
import viteLogo from '/vite.svg' import viteLogo from '/vite.svg'
import Edicion1 from './assets/Edicion21.jpg';
import Edicion12 from './assets/Edicion12.jpg';
import Edicion13 from './assets/Edicion13.jpg';
import Edicion14 from './assets/Edicion14.jpg';
import Edicion15 from './assets/Edicion15.jpg';
import Edicion16 from './assets/Edicion16.jpg';
import otra_imagen from './assets/Edicion2.jpg';
import { RiCustomerService2Fill } from "react-icons/ri"; import { RiCustomerService2Fill } from "react-icons/ri";
import { FaUser } from "react-icons/fa"; import { FaUser } from "react-icons/fa";
import { LuShoppingBasket } from "react-icons/lu"; import { LuShoppingBasket } from "react-icons/lu";
@ -165,8 +171,26 @@ const mostrarAlertaLogOut = () => {
pedido.relleno === 'Oreo' ? <img src={pastel_fresa_oreo} alt="" className="imagenPastel" /> : pedido.relleno === 'Oreo' ? <img src={pastel_fresa_oreo} alt="" className="imagenPastel" /> :
pedido.relleno === 'Vainilla' ? <img src={pastel_fresa_vainilla} alt="" className="imagenPastel" /> : pedido.relleno === 'Vainilla' ? <img src={pastel_fresa_vainilla} alt="" className="imagenPastel" /> :
<img src={otra_imagen} alt="" className="imagenPastel" /> // Si el relleno no coincide con ninguno de los anteriores <img src={otra_imagen} alt="" className="imagenPastel" /> // Si el relleno no coincide con ninguno de los anteriores
) : pedido.nombre_pastel === 'Pastel Chocolate Blanco' ? (
<img src={Edicion1} alt="" className="imagenPastel" />
) : pedido.nombre_pastel === 'Pastel Cajeta' ? (
<img src={Edicion16} alt="" className="imagenPastel" />
): pedido.nombre_pastel === 'Pastel de Chocolate' ? (
<img src={Edicion13} alt="" className="imagenPastel" />
): pedido.nombre_pastel === 'Pastel Frambuesa' ? (
<img src={Edicion15} alt="" className="imagenPastel" />
) : pedido.nombre_pastel === 'Pastel de Moka' ? (
<img src={Edicion12} alt="" className="imagenPastel" />
) : pedido.nombre_pastel === 'Pastel de Zanahoria' ? (
<img src={Edicion14} alt="" className="imagenPastel" />
):( ):(
<img src={otra_imagen} alt="" className="imagenPastel" /> // Si el pastel no es de fresas <img src={otra_imagen} alt="" className="imagenPastel" /> // Si el pastel no es de fresas ni de chocolate blanco
)} )}
</div> </div>

View File

@ -283,7 +283,8 @@ const [datosFormulario, setDatosFormulario] = useState(
textoEncima: textoEncima, textoEncima: textoEncima,
textoCantidad: datosPastel.quantity, textoCantidad: datosPastel.quantity,
textoRelleno: textoRelleno, textoRelleno: textoRelleno,
textoTipo: textoTipo textoTipo: "Pastel de Fresas",
textoPrecio:"1000",
}); });
console.log(response.data); console.log(response.data);

View File

@ -31,9 +31,14 @@ const redirectToRecuperarContraseña = () => {
}).then(respuesta=>{ }).then(respuesta=>{
if(respuesta){ if(respuesta){
if(datosFormulario.correo == "admin" && datosFormulario.password == "12345"){
console.log("asdasddsdasdasdadadsasddasdasdassa");
}else{
redirectToHome(); redirectToHome();
} }
}
}) })
} }
@ -159,6 +164,7 @@ const redirectToHome = () => {
<div className="register-link"> <div className="register-link">
<p>¿No tienes una cuenta? <a href="" onClick={redirectToRegistro}>Register </a></p> <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)} />}
</Box> </Box>

View File

@ -66,3 +66,4 @@ button:focus-visible {
background-color: #f9f9f9; background-color: #f9f9f9;
} }
} }