Funcionalidad Personalizar Pastel y Pedidos 2.0
This commit is contained in:
parent
0085f238be
commit
bbf03d60c3
|
@ -20,7 +20,7 @@ import PastelEditado6 from "./assets/Edicion6.jpg";
|
|||
import PastelZanahoria from "./assets/Pastel-Zanahoria.jpg";
|
||||
import MejoresPasteles from "./assets/MejoresPasteles.jpg";
|
||||
import PastelTematico from "./assets/pastel-tematico.jpg";
|
||||
import Swal from 'sweetalert2'
|
||||
import Swal from 'sweetalert2';
|
||||
//import PopupV from "/src/Popups/PopupLoginValido.jsx";
|
||||
//import PopupIv from "/src/Popups/PopupLoginInvalido.jsx";
|
||||
|
||||
|
|
|
@ -97,7 +97,7 @@
|
|||
display: flex; /* Añadir esta propiedad para usar flexbox */
|
||||
width: 700px;
|
||||
gap: 1.5rem;
|
||||
height: 215px;
|
||||
height: 230px;
|
||||
margin: 20px;
|
||||
padding: 15px;
|
||||
border: 1px solid #ccc;
|
||||
|
@ -108,8 +108,9 @@
|
|||
|
||||
/* Estilos para la imagen */
|
||||
.imagenPastel {
|
||||
width: 100%;
|
||||
width: 300px;
|
||||
height: 100%; /* Ajustar al 100% del contenedor padre */
|
||||
object-fit: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% auto;
|
||||
border-radius: 8px; /* Añadir bordes redondeados solo a la izquierda */
|
||||
|
|
|
@ -12,6 +12,12 @@ import { CiHeart } from "react-icons/ci";
|
|||
import { FaRegEye } from "react-icons/fa";
|
||||
import { CiShare2 } from "react-icons/ci";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import axios from "axios";
|
||||
//imagenes de pastel de fresas
|
||||
import pastel_fresa_original from "./assets/Pastel-fresa-original.png";
|
||||
import pastel_fresa_arcoiris from "./assets/Pastel-fresas-arcoiris.png";
|
||||
import pastel_fresa_oreo from "./assets/Pastel-fresas-oreo.png";
|
||||
import pastel_fresa_vainilla from "./assets/Pastel-fresas-vainilla.png";
|
||||
|
||||
import pastelZarza from "./assets/pastel-zarza.jpg"
|
||||
|
||||
|
@ -20,64 +26,164 @@ function Pedidos() {
|
|||
const [count, setCount] = useState(0);
|
||||
const navigate = useNavigate();
|
||||
|
||||
const [pedidosDePasteles, setPedidosDePasteles] = useState([]);
|
||||
|
||||
const [datosFormulario, setDatosFormulario] = useState(
|
||||
{correo: '',
|
||||
password: '',
|
||||
nombre: ''
|
||||
});
|
||||
|
||||
|
||||
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();
|
||||
obtenerPedidosDePasteles();
|
||||
console.log("obtuvo los pedidos");
|
||||
}, []);
|
||||
|
||||
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 mostrarAlertaPedidoFallidaLogin=()=>{
|
||||
Swal.fire({
|
||||
title: "Pedido Fallida",
|
||||
text: "Inicia Sesion para poder hacer un pedido.",
|
||||
icon: "error",
|
||||
button: "Aceptar"
|
||||
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
|
||||
const obtenerPedidosDePasteles = async () => {
|
||||
try {
|
||||
const response = await axios.post('http://localhost:4567/frontend/obtenerPedidosDePasteles');
|
||||
console.log("Pedidos de pasteles obtenidos:", response.data.pedidos_de_pasteles);
|
||||
// Almacena los pedidos de pasteles en el estado
|
||||
setPedidosDePasteles(response.data.pedidos_de_pasteles);
|
||||
} catch (error) {
|
||||
console.error("Error al obtener pedidos de pasteles:", error);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
const redirectPersonalizarPastelArcoiris = () => {
|
||||
// Redirige a la página del hotel cuando se hace clic en el botón
|
||||
navigate("/PersonalizarPastel/PastelArcoiris");
|
||||
};
|
||||
|
||||
const redirectToPedidos = () => {
|
||||
navigate("/Pedidos");
|
||||
|
||||
};
|
||||
|
||||
const redirectToPasteles = () => {
|
||||
navigate("/Pasteles");
|
||||
};
|
||||
|
||||
const redirectInicio = () => {
|
||||
};
|
||||
|
||||
const redirectInicio = () => {
|
||||
// Redirige a la página del hotel cuando se hace clic en el botón
|
||||
navigate("/");
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
setNombreUsuario("Mario");
|
||||
}, []);
|
||||
|
||||
const [nombreUsuario, setNombreUsuario]=useState("");
|
||||
};
|
||||
const redirectToLogin = () => {
|
||||
|
||||
navigate("/Login");
|
||||
};
|
||||
|
||||
const redirectToPedidos = () => {
|
||||
navigate("/Pedidos");
|
||||
|
||||
};
|
||||
|
||||
const redirectToPasteles = () => {
|
||||
navigate("/Pasteles");
|
||||
};
|
||||
|
||||
const [pedidos, setPedidos] = useState([]);
|
||||
|
||||
const generarPedidos = () => {
|
||||
|
||||
if(nombreUsuario==null){
|
||||
if (nombreUsuario == null) {
|
||||
return (
|
||||
<h1 className="IniSesReserva">Inicia Sesion para poder ver tus reservaciones.</h1>
|
||||
<h1 className="IniSesReserva">Inicia Sesión para poder ver tus pedidos de pasteles.</h1>
|
||||
);
|
||||
}else{
|
||||
|
||||
if(!pedidos){
|
||||
return(
|
||||
|
||||
<h1 className="ReservaNull">No tienes pedidos en este momento.</h1>
|
||||
} else {
|
||||
if (pedidosDePasteles.length === 0) {
|
||||
return (
|
||||
<h1 className="ReservaNull">No tienes pedidos de pasteles en este momento.</h1>
|
||||
);
|
||||
|
||||
|
||||
}else{
|
||||
} else {
|
||||
return (
|
||||
<div>
|
||||
<div key={1}/*{reserva.id_reservacion}*/ className="reservacion">
|
||||
{pedidosDePasteles.map(pedido => (
|
||||
<div key={pedido.id_pedido} className="reservacion">
|
||||
|
||||
|
||||
<div className='container-img-pedido'>
|
||||
<img src={pastelZarza} alt="" className="imagenPastel" />
|
||||
{pedido.nombre_pastel === 'Pastel de Fresas' ? (
|
||||
pedido.relleno === 'Original' ? <img src={pastel_fresa_original} alt="" className="imagenPastel" /> :
|
||||
pedido.relleno === 'Arcoiris' ? <img src={pastel_fresa_arcoiris} 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" /> :
|
||||
<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 pastel no es de fresas
|
||||
)}
|
||||
</div>
|
||||
|
||||
|
||||
<div className="reservaData">
|
||||
<h3>{"Pastel Arcoiris"/*reserva.nombre_hotel*/}</h3>
|
||||
<p>Precio de la reservación: ${500/*reserva.precio*/}</p>
|
||||
<button className="eliminar-btn" /*onClick={() => mostrarAlertaEliminarRes(reserva.id_reservacion,reserva.nombre_hotel)}*/>
|
||||
<h3>{pedido.nombre_pastel}</h3>
|
||||
<p>Precio del pastel: ${pedido.precio}</p>
|
||||
<p>Tamaño: {pedido.tamaño}</p>
|
||||
<p>Estatus: {pedido.estatus}</p>
|
||||
<p>Inscripción: {pedido.inscripcion}</p>
|
||||
<p>Relleno: {pedido.relleno}</p>
|
||||
<button className="eliminar-btn" onClick={() => mostrarAlertaEliminarRes(pedido.id_pedido, pedido.nombre_pastel)}>
|
||||
Eliminar Pedido
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
@ -119,11 +225,20 @@ function Pedidos() {
|
|||
<nav className="navbar container">
|
||||
<i className="fa-solid fa-bars"></i>
|
||||
<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={redirectPersonalizarPastelArcoiris}>Personalizar Pastel</a></li>
|
||||
<li><a href="/Pedidos" onClick={redirectToPedidos}>Pedidos</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>
|
||||
|
||||
|
|
|
@ -1,6 +1,8 @@
|
|||
import React, { useState } from "react";
|
||||
import React, { useState, useEffect } from "react";
|
||||
import './PersPastelStyle.css';
|
||||
|
||||
import { Button, Select, MenuItem, TextField, Box } from '@mui/material';
|
||||
|
||||
import { RiCustomerService2Fill } from "react-icons/ri";
|
||||
import { FaUser } from "react-icons/fa";
|
||||
import { LuShoppingBasket } from "react-icons/lu";
|
||||
|
@ -9,12 +11,50 @@ import { CiHeart } from "react-icons/ci";
|
|||
import { FaRegEye } from "react-icons/fa";
|
||||
import { CiShare2 } from "react-icons/ci";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import pastelArcoirisFondo from "./assets/pastel-zarza.jpg"
|
||||
import pastelArcoiris from "./assets/pastel1.jpg"
|
||||
import axios from 'axios';
|
||||
import pastel_fresa_original from "./assets/Pastel-fresa-original.png";
|
||||
import pastel_fresa_arcoiris from "./assets/Pastel-fresas-arcoiris.png";
|
||||
import pastel_fresa_oreo from "./assets/Pastel-fresas-oreo.png";
|
||||
import pastel_fresa_vainilla from "./assets/Pastel-fresas-vainilla.png";
|
||||
import Swal from 'sweetalert2'
|
||||
import pastelTexto from "./assets/pastel-texto.jpg"
|
||||
|
||||
function Pastel() {
|
||||
const navigate = useNavigate();
|
||||
|
||||
const [quantity, setQuantity] = useState(1);
|
||||
|
||||
const [textoEncima, setTextoEncima] = useState("");
|
||||
|
||||
const [textoCantidad, setTextoCantidad] = useState("");
|
||||
|
||||
const [textoRelleno, setTextoRelleno] = useState("");
|
||||
|
||||
const [textoTipo, setTextoTipo] = useState("");
|
||||
|
||||
|
||||
|
||||
|
||||
const [datosPastel, setDatosPastel] = useState(
|
||||
{
|
||||
texto: '',
|
||||
quantity: 1
|
||||
|
||||
});
|
||||
|
||||
const [datosPastelEnviar, setDatosPastelEnviar] = useState(
|
||||
{
|
||||
texto: textoEncima,
|
||||
quantity: datosPastel.quantity
|
||||
|
||||
});
|
||||
|
||||
const [datosFormulario, setDatosFormulario] = useState(
|
||||
{correo: '',
|
||||
password: '',
|
||||
nombre: ''
|
||||
});
|
||||
|
||||
const redirectPersonalizarPastelArcoiris = () => {
|
||||
// Redirige a la página del hotel cuando se hace clic en el botón
|
||||
navigate("/PersonalizarPastel/PastelArcoiris");
|
||||
|
@ -24,16 +64,256 @@ function Pastel() {
|
|||
// Redirige a la página del hotel cuando se hace clic en el botón
|
||||
navigate("/");
|
||||
};
|
||||
const redirectToLogin = () => {
|
||||
|
||||
navigate("/Login");
|
||||
};
|
||||
|
||||
const redirectToPedidos = () => {
|
||||
navigate("/Pedidos");
|
||||
|
||||
};
|
||||
|
||||
const redirectToPasteles = () => {
|
||||
navigate("/Pasteles");
|
||||
};
|
||||
|
||||
const [imagenVisible, setImagenVisible] = useState(pastelArcoiris);
|
||||
|
||||
const cambiarImagen = () => {
|
||||
if (imagenVisible === pastelArcoiris) {
|
||||
setImagenVisible(pastelArcoirisFondo);
|
||||
} else {
|
||||
setImagenVisible(pastelArcoiris);
|
||||
const [lastSelectedImage, setLastSelectedImage] = useState(pastel_fresa_original);
|
||||
const [imagenVisible, setImagenVisible] = useState(pastel_fresa_original);
|
||||
const [inputActivo, setInputActivo] = useState(false);
|
||||
const cambiarImagenBoton = (nuevaImagen) => {
|
||||
if (!inputActivo) {
|
||||
setImagenVisible(nuevaImagen);
|
||||
setLastSelectedImage(nuevaImagen);
|
||||
}
|
||||
};
|
||||
|
||||
const handleChange = (event) => {
|
||||
setImagenVisible(pastelTexto);
|
||||
setDatosPastel(prevState => ({
|
||||
...prevState, // Clona el estado actual
|
||||
texto: event.target.value, // Establece el campo 'correo' con el valor del evento
|
||||
}));
|
||||
|
||||
};
|
||||
|
||||
const handleInputFocus = () => {
|
||||
console.log(textoEncima);
|
||||
setDatosPastel(prevState => ({
|
||||
...prevState, // Clona el estado actual
|
||||
texto: textoEncima, // Establece el campo 'correo' con el valor del evento
|
||||
}));
|
||||
|
||||
//console.log("hola");
|
||||
|
||||
|
||||
setImagenVisible(pastelTexto);
|
||||
};
|
||||
|
||||
const handleInputBlur = () => {
|
||||
|
||||
setTextoEncima(datosPastel.texto);
|
||||
console.log(textoEncima);
|
||||
setDatosPastel(prevState => ({
|
||||
...prevState, // Clona el estado actual
|
||||
texto: "", // Establece el campo 'correo' con el valor del evento
|
||||
}));
|
||||
setImagenVisible(lastSelectedImage);
|
||||
};
|
||||
|
||||
const handleDocumentClick = (event) => {
|
||||
// Comprueba si el clic ocurrió fuera del input
|
||||
if (!event.target.matches("#inscription")) {
|
||||
}
|
||||
};
|
||||
|
||||
React.useEffect(() => {
|
||||
|
||||
setTextoRelleno("Original");
|
||||
document.addEventListener("click", handleDocumentClick);
|
||||
return () => {
|
||||
document.removeEventListener("click", handleDocumentClick);
|
||||
};
|
||||
}, []);
|
||||
|
||||
|
||||
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);
|
||||
}
|
||||
};
|
||||
|
||||
const mostrarAlertaPedidoFallidaLogin=()=>{
|
||||
Swal.fire({
|
||||
title: "Pedido Fallida",
|
||||
text: "Inicia Sesion para poder hacer un pedido.",
|
||||
icon: "error",
|
||||
button: "Aceptar"
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
const handleIncrement = () => {
|
||||
setQuantity((prevQuantity) => prevQuantity + 1);
|
||||
};
|
||||
|
||||
const handleDecrement = () => {
|
||||
setQuantity((prevQuantity) => (prevQuantity > 1 ? prevQuantity - 1 : 1));
|
||||
};
|
||||
|
||||
const mostrarAlertaReservaFallidaPers=()=>{
|
||||
Swal.fire({
|
||||
title: "Pedidos Info",
|
||||
text: "Solo hay pasteles de hasta 12 personas.",
|
||||
icon: "info",
|
||||
button: "Aceptar"
|
||||
|
||||
});
|
||||
};
|
||||
|
||||
const mostrarAlertaReservaExitosa=()=>{
|
||||
Swal.fire({
|
||||
title: "Pedido Exitosa",
|
||||
text: "Tu Pedido se ha realizado correctamente.",
|
||||
icon: "success",
|
||||
button: "Aceptar"
|
||||
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
|
||||
const handleQuantityChange = (value) => {
|
||||
if (value >= 1 && value <= 12) {
|
||||
setQuantity(value);
|
||||
setDatosPastel((prevData) => ({ ...prevData, quantity: value }));
|
||||
} else {
|
||||
mostrarAlertaReservaFallidaPers();
|
||||
}
|
||||
};
|
||||
|
||||
const clickBotonOriginal = () => {
|
||||
cambiarImagenBoton(pastel_fresa_original);
|
||||
setTextoRelleno("Original");
|
||||
|
||||
};
|
||||
|
||||
const clickBotonArcoiris = () => {
|
||||
cambiarImagenBoton(pastel_fresa_arcoiris);
|
||||
setTextoRelleno("Arcoiris");
|
||||
|
||||
};
|
||||
|
||||
const clickBotonOreo = () => {
|
||||
cambiarImagenBoton(pastel_fresa_oreo);
|
||||
setTextoRelleno("Oreo");
|
||||
|
||||
};
|
||||
|
||||
const clickBotonVainilla = () => {
|
||||
cambiarImagenBoton(pastel_fresa_vainilla);
|
||||
setTextoRelleno("Vainilla");
|
||||
|
||||
};
|
||||
|
||||
|
||||
const hacerPedidoPastel1 = async () => {
|
||||
console.log("Fresas");
|
||||
console.log(datosPastel.quantity);
|
||||
console.log(textoEncima);
|
||||
console.log(textoRelleno);
|
||||
|
||||
try{
|
||||
|
||||
if(nombreUsuario==null){
|
||||
mostrarAlertaPedidoFallidaLogin();
|
||||
|
||||
}else{
|
||||
|
||||
const response = await axios.post('http://localhost:4567/frontend/hacerPedidoPastel1', {
|
||||
textoEncima: textoEncima,
|
||||
textoCantidad: datosPastel.quantity,
|
||||
textoRelleno: textoRelleno,
|
||||
textoTipo: textoTipo
|
||||
});
|
||||
|
||||
console.log(response.data);
|
||||
mostrarAlertaReservaExitosa();
|
||||
|
||||
// Limpiar los estados después de hacer el pedido
|
||||
setDatosPastel({ texto: "", quantity: 1 });
|
||||
setTextoEncima("");
|
||||
setTextoCantidad("");
|
||||
setTextoRelleno("Original");
|
||||
setTextoTipo("");
|
||||
setDatosPastel({ texto: "", quantity: 1 });
|
||||
setQuantity(1);
|
||||
cambiarImagenBoton(pastel_fresa_original);
|
||||
|
||||
|
||||
}
|
||||
|
||||
}catch(error){
|
||||
console.error("Error al hace el pedido");
|
||||
throw error;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
};
|
||||
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
|
@ -59,9 +339,7 @@ function Pastel() {
|
|||
|
||||
<div className="container-user">
|
||||
<FaUser className="icono-User"/>
|
||||
|
||||
<div className="content-shopping-cart">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -72,14 +350,22 @@ function Pastel() {
|
|||
<nav className="navbar container">
|
||||
<i className="fa-solid fa-bars"></i>
|
||||
<ul className="menu">
|
||||
<li><a href="#" onClick={redirectInicio}>Inicio</a></li>
|
||||
<li><a href="#">Pasteles</a></li>
|
||||
<li><a href="#">Personalizar Pastel</a></li>
|
||||
<li><a href="#">Pedidos</a></li>
|
||||
<li><a href="#">Blog</a></li>
|
||||
<li><a href="#" onClick={redirectInicio}>Inicio</a></li>
|
||||
<li><a href="#" onClick={redirectToPasteles} >Pasteles</a></li>
|
||||
<li><a href="#" onClick={redirectPersonalizarPastelArcoiris}>Personalizar Pastel</a></li>
|
||||
<li><a href="/Pedidos" onClick={redirectToPedidos}>Pedidos</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">
|
||||
<input type="search" placeholder="Buscar..." />
|
||||
|
@ -95,11 +381,12 @@ function Pastel() {
|
|||
|
||||
<main className = "main-pers-pastel">
|
||||
<div className="container-img-1">
|
||||
<img className="imgPastel" src={imagenVisible} alt="Pastel"/>
|
||||
<img className="imgPastel" src={imagenVisible} alt="Pastel"></img>
|
||||
<div className="texto-encima">{datosPastel.texto}</div>
|
||||
</div>
|
||||
<div className="container-info-product">
|
||||
<div className="container-price">
|
||||
<span>Pastel Arcoiris</span>
|
||||
<span>Pastel de Fresas</span>
|
||||
<i className="fa-solid fa-angle-right"></i>
|
||||
</div>
|
||||
|
||||
|
@ -108,22 +395,49 @@ function Pastel() {
|
|||
<div className="OpcionesPers">
|
||||
<h2 className="textPersPastel">Personaliza tu pastel</h2>
|
||||
<div className="mb-4">
|
||||
<p className="pastel-Type">Tipo de Pastel</p>
|
||||
<p className="pastel-Type">Tipo de Relleno</p>
|
||||
<div className="botones-pastel">
|
||||
<button className="boton-1" onClick={cambiarImagen}>
|
||||
Vanilla Rainbow Cake
|
||||
<button className="boton-1" onClick={() => clickBotonOriginal()}>
|
||||
Original
|
||||
</button>
|
||||
<button className="boton-2">
|
||||
Confetti Cake
|
||||
<button className="boton-2" onClick={() => clickBotonArcoiris()}>
|
||||
Arcoiris
|
||||
</button>
|
||||
<button className="boton-3">
|
||||
Black & White Cake with Chocolate Fudged
|
||||
<button className="boton-3" onClick={() => clickBotonOreo()}>
|
||||
Oreo
|
||||
</button>
|
||||
<button className="boton-4">
|
||||
Chocolate Fudge Cake
|
||||
<button className="boton-4" onClick={() => clickBotonVainilla()}>
|
||||
Vainilla
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="container-cantidad-personas">
|
||||
<div className="titulo-pers">Personas </div>
|
||||
<TextField
|
||||
type="number"
|
||||
placeholder="1"
|
||||
value={quantity}
|
||||
onChange={(e) => handleQuantityChange(e.target.value)}
|
||||
InputProps={{ inputProps: { min: 1 } }}
|
||||
className="input-cantidad"
|
||||
/>
|
||||
<div className="btn-increment-decrement">
|
||||
<i
|
||||
className="fa-solid fa-chevron-up"
|
||||
id="increment"
|
||||
onClick={handleIncrement}
|
||||
></i>
|
||||
<i
|
||||
className="fa-solid fa-chevron-down"
|
||||
id="decrement"
|
||||
onClick={handleDecrement}
|
||||
></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="mb-6">
|
||||
<p className="label-text-pers">Inscription (30 Character Limit)</p>
|
||||
<input className="input-text-pers"
|
||||
|
@ -132,6 +446,10 @@ function Pastel() {
|
|||
name="inscription"
|
||||
placeholder="Enter your text"
|
||||
maxLength="30"
|
||||
value={datosPastel.texto}
|
||||
onChange={handleChange}
|
||||
onBlur={handleInputBlur}
|
||||
onFocus={handleInputFocus}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -139,8 +457,7 @@ function Pastel() {
|
|||
</div>
|
||||
|
||||
<div className="container-add-cart">
|
||||
<button className="btn-add-to-cart">
|
||||
<i className="fa-solid fa-plus"></i>
|
||||
<button className="btn-add-to-cart" onClick={hacerPedidoPastel1}>
|
||||
Añadir al carrito
|
||||
</button>
|
||||
</div>
|
||||
|
@ -186,16 +503,102 @@ function Pastel() {
|
|||
|
||||
<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>
|
||||
|
||||
</main>
|
||||
|
||||
<div className="Reseñas">
|
||||
|
||||
<h2 className="customer-reviews-title">Reseñas</h2>
|
||||
|
||||
<div className="customer-reviews-container">
|
||||
|
||||
<div className="flex justify-center space-x-4">
|
||||
<div className="customer-review-card">
|
||||
<div className="customer-review-info">
|
||||
<img className="customer-review-avatar" src="https://placehold.co/100x100" alt="John Deo"/>
|
||||
<div>
|
||||
<div className="customer-review-name">John Deo</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="customer-review-rating">
|
||||
★★★★★
|
||||
</div>
|
||||
<p className="customer-review-content">
|
||||
Lorem Ipsum Dolor Sit Amet Consectetur Adipiscing Elit. Asperiores Sint Corporis Voluptate Non Error Obc adhajkhajkdahdjkhsdjkakjas jkdhasjdahdjkadhasj aecati Adipisci A Autem? Similique Animi Quae Impedit Vel Dicta Placeat Ad Temporibus Illo Distinctio. Tenetur!
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<footer className="footer">
|
||||
<div className="container container-footer">
|
||||
<div className="menu-footer">
|
||||
<div className="contact-info">
|
||||
<p className="title-footer">Información de Contacto</p>
|
||||
<ul>
|
||||
<li>
|
||||
Avenida Xalapa
|
||||
</li>
|
||||
<li>Teléfono: 2288520821</li>
|
||||
<li>EmaiL: cdgn_17@hotmail.com</li>
|
||||
</ul>
|
||||
<div className="social-icons">
|
||||
<span className="facebook">
|
||||
<i className="fa-brands fa-facebook-f"></i>
|
||||
</span>
|
||||
<span className="twitter">
|
||||
<i className="fa-brands fa-twitter"></i>
|
||||
</span>
|
||||
<span className="youtube">
|
||||
<i className="fa-brands fa-youtube"></i>
|
||||
</span>
|
||||
<span className="pinterest">
|
||||
<i className="fa-brands fa-pinterest-p"></i>
|
||||
</span>
|
||||
<span className="instagram">
|
||||
<i className="fa-brands fa-instagram"></i>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="information">
|
||||
<p className="title-footer">Información</p>
|
||||
<ul>
|
||||
<li><a href="#">Acerca de Nosotros</a></li>
|
||||
<li><a href="#">Información de Entrega</a></li>
|
||||
<li><a href="#">Politicas de Privacidad</a></li>
|
||||
<li><a href="#">Términos y condiciones</a></li>
|
||||
<li><a href="#">Contactános</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="my-account">
|
||||
<p className="title-footer">Mi cuenta</p>
|
||||
|
||||
<ul>
|
||||
<li><a href="#">Mi cuenta</a></li>
|
||||
<li><a href="#">Pedidos</a></li>
|
||||
<li><a href="#">Boletín</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div className="copyright">
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -145,6 +145,7 @@
|
|||
.menu a:hover {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.search-form {
|
||||
position: relative;
|
||||
display: flex;
|
||||
|
@ -154,7 +155,6 @@
|
|||
background-color: #fff;
|
||||
height: 4.4rem;
|
||||
overflow: hidden;
|
||||
|
||||
}
|
||||
|
||||
.search-form input {
|
||||
|
@ -166,12 +166,10 @@
|
|||
padding: 0 2rem;
|
||||
color: #777;
|
||||
cursor: pointer;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.search-form input::-webkit-search-cancel-button {
|
||||
appearance: none;
|
||||
|
||||
}
|
||||
|
||||
.search-form .btn-search {
|
||||
|
@ -182,8 +180,8 @@
|
|||
justify-content: center;
|
||||
height: 100%;
|
||||
padding: 1rem;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.btn-search i {
|
||||
font-size: 2rem;
|
||||
color: #fff;
|
||||
|
@ -198,6 +196,25 @@
|
|||
}
|
||||
|
||||
|
||||
.imgPastel{
|
||||
position: relative;
|
||||
max-height: 670px;
|
||||
}
|
||||
|
||||
.texto-encima {
|
||||
position: absolute;
|
||||
top: 60%;
|
||||
left:34%;
|
||||
max-width: 200px;
|
||||
word-wrap: break-word; /* Esta propiedad permite que las palabras se rompan cuando no caben en el contenedor */
|
||||
overflow-wrap: break-word;
|
||||
transform: translate(-50%, -50%);
|
||||
background-color: rgba(255, 255, 255, 0.4); /* Cambia el color de fondo según lo desees */
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
font-size: 32px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
.container-img-1 {
|
||||
|
@ -301,9 +318,6 @@
|
|||
padding-bottom: 0px;
|
||||
}
|
||||
|
||||
.opcionesPers{
|
||||
|
||||
}
|
||||
|
||||
.textPersPastel{
|
||||
font-size: 18px;
|
||||
|
@ -325,7 +339,7 @@
|
|||
}
|
||||
|
||||
.boton-1{
|
||||
margin-right: 10px;
|
||||
margin-right: 20px;
|
||||
border: none;
|
||||
color: white;
|
||||
padding: 14px 28px;
|
||||
|
@ -423,7 +437,7 @@
|
|||
.form-group label {
|
||||
width: 100px;
|
||||
color: #222;
|
||||
font-weight: 700;
|
||||
font-weight: lighter;
|
||||
}
|
||||
|
||||
.form-group select {
|
||||
|
@ -634,4 +648,148 @@ footer {
|
|||
background-color: #eee;
|
||||
margin-top: 50px;
|
||||
color: #222;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.reseñas{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Estilos para el contenedor principal */
|
||||
.customer-reviews-container {
|
||||
background-color: #fff;
|
||||
margin-left: 35.5rem;
|
||||
margin-right: 35.5rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Estilos para el título */
|
||||
.customer-reviews-title {
|
||||
font-size: 2.875rem; /* text-3xl */
|
||||
font-weight: bold;
|
||||
padding-top: 3rem;
|
||||
text-align: center;
|
||||
color: #4b5563; /* text-zinc-800 */
|
||||
margin-bottom: 2.5rem; /* mb-10 */
|
||||
}
|
||||
|
||||
/* Estilos para el contenedor de cada reseña */
|
||||
.customer-review-card {/* ajustar según sea necesario */
|
||||
|
||||
border-radius: 1rem;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||
padding: 1.5rem;
|
||||
background-color: #f9fafb; /* bg-zinc-50 */
|
||||
|
||||
}
|
||||
|
||||
/* Estilos para la sección de la imagen y la información del cliente */
|
||||
.customer-review-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem; /* space-x-2 */
|
||||
margin-bottom: 1rem; /* mb-4 */
|
||||
}
|
||||
|
||||
/* Estilos para la imagen del cliente */
|
||||
.customer-review-avatar {
|
||||
width: 4.5rem; /* w-10 */
|
||||
height: 4.5rem; /* h-10 */
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
/* Estilos para el nombre del cliente */
|
||||
.customer-review-name {
|
||||
padding-left: 3rem;
|
||||
font-size: 1.875rem; /* text-sm */
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* Estilos para la descripción del cliente */
|
||||
.customer-review-description {
|
||||
font-size: 0.875rem; /* text-sm */
|
||||
color: #4b5563; /* text-zinc-600 */
|
||||
}
|
||||
|
||||
/* Estilos para la calificación */
|
||||
.customer-review-rating {
|
||||
margin-bottom: 0.5rem; /* mb-2 */
|
||||
color: var(--primary-color); /* text-pink-500 */
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
/* Estilos para el contenido de la reseña */
|
||||
.customer-review-content {
|
||||
color: #4b5563; /* text-zinc-700 */
|
||||
font-size: 1.5rem; /* text-base */
|
||||
}
|
||||
|
||||
|
||||
.btn-increment-decrement {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: absolute;
|
||||
top: 17px;
|
||||
right: 17px;
|
||||
}
|
||||
|
||||
.btn-increment-decrement i {
|
||||
font-size: 31px;
|
||||
color: #666;
|
||||
cursor: pointer;
|
||||
padding-bottom: 3rem;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
.input-cantidad {
|
||||
background-color: #f7f7f7;
|
||||
border: none;
|
||||
padding: 15px;
|
||||
width: 110px;
|
||||
height: 100%;
|
||||
color: #666;
|
||||
font-weight: lighter;
|
||||
line-height: 0;
|
||||
}
|
||||
.input-cantidad:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.input-cantidad::-webkit-inner-spin-button,
|
||||
.input-cantidad::-webkit-outer-spin-button {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
.container-cantidad-personas {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.container-add-reservacion {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
padding-bottom: 30px;
|
||||
border-bottom: 1px solid #e4e4e4;
|
||||
font-weight: lighter;
|
||||
}
|
||||
|
||||
.titulo-pers{
|
||||
font-weight: lighter;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.fa-chevron-up,
|
||||
.fa-chevron-down {
|
||||
font-size: 20px; /* Aumentar el tamaño de la fuente de los iconos */
|
||||
}
|
||||
|
||||
|
||||
|
|
Binary file not shown.
After Width: | Height: | Size: 944 KiB |
Binary file not shown.
After Width: | Height: | Size: 1013 KiB |
Binary file not shown.
After Width: | Height: | Size: 1021 KiB |
Binary file not shown.
After Width: | Height: | Size: 975 KiB |
Binary file not shown.
After Width: | Height: | Size: 59 KiB |
Loading…
Reference in New Issue