Funcionalidad Personalizar Pastel y Pedidos 2.0

This commit is contained in:
xFractu 2024-05-12 17:59:14 -06:00
parent 0085f238be
commit bbf03d60c3
10 changed files with 767 additions and 90 deletions

View File

@ -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";

View File

@ -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 */

View File

@ -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,11 +26,110 @@ 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 redirectInicio = () => {
// Redirige a la página del hotel cuando se hace clic en el botón
navigate("/");
};
const redirectToLogin = () => {
navigate("/Login");
};
const redirectToPedidos = () => {
navigate("/Pedidos");
@ -34,50 +139,51 @@ function Pedidos() {
navigate("/Pasteles");
};
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 [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>
);
}
@ -124,6 +230,15 @@ function Pedidos() {
<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>

View File

@ -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,17 +64,257 @@ function Pastel() {
// Redirige a la página del hotel cuando se hace clic en el botón
navigate("/");
};
const redirectToLogin = () => {
const [imagenVisible, setImagenVisible] = useState(pastelArcoiris);
navigate("/Login");
};
const cambiarImagen = () => {
if (imagenVisible === pastelArcoiris) {
setImagenVisible(pastelArcoirisFondo);
} else {
setImagenVisible(pastelArcoiris);
const redirectToPedidos = () => {
navigate("/Pedidos");
};
const redirectToPasteles = () => {
navigate("/Pasteles");
};
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>
@ -73,11 +351,19 @@ function Pastel() {
<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="#" 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>
@ -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>
</>
);
}

View File

@ -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 {
@ -635,3 +649,147 @@ footer {
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