Construirás un sitio real de pizza: tarjetas de productos, carrito y pago.
Para cada paso hay un prompt listo — solo cópialo y envíalo a la IA.
1Cambiar la tienda al nuevo archivo Excel con pizzas
En lugar de electrónica el catálogo mostrará pizzas reales del nuevo archivo — con nombres, descripciones, precios y fotos correctos. Los filtros, búsqueda y ordenación funcionan con los nuevos datos.
💬 Copia y envía a la IA
Tengo un archivo pizzas.xlsx con nuevas pizzas — está en la misma carpeta que el sitio.
Reemplaza todos los productos del sitio con las pizzas de este archivo: actualiza nombres, descripciones, precios
y categorías. Las imágenes de las pizzas están en la carpeta images/ — emparéjalas con cada pizza
por número o nombre de archivo.
2Agregar un tercer código de promoción
En la página de pago aparecerá un tercer código de promoción.
Elige tu propia palabra clave y descuento — por ejemplo PIZZA da −20%.
💬 Copia y envía a la IA
En la página de pago ya funcionan los códigos GOOD y NEW. Encuentra dónde se verifican en el código
y agrega un tercer código de promoción junto a ellos — elige cualquier palabra y el descuento que da
(puede ser un porcentaje o una cantidad fija).
3Agregar un botón "Vaciar carrito"
Aparecerá un botón "Vaciar todo" en el encabezado del panel lateral del carrito.
Presiónalo — todos los artículos se eliminan a la vez y el carrito queda vacío.
💬 Copia y envía a la IA
En el panel lateral del carrito agrega un botón "Vaciar todo". Al hacer clic — todos los productos se eliminan
del carrito a la vez y el carrito queda vacío.
El botón solo debe ser visible cuando hay algo en el carrito.
4Mostrar el número de productos encontrados
Encima de la cuadrícula de productos aparecerá una línea: "Encontrados: 6 productos".
Aplica un filtro o escribe en la búsqueda — el número se actualiza automáticamente.
💬 Copia y envía a la IA
Encima de la lista de pizzas agrega una etiqueta que muestre cuántos productos se encontraron —
por ejemplo "Encontrados: 6 productos". El número debe cambiar automáticamente cuando
apliques un filtro o escribas algo en el buscador.
5Cantidad de productos en los botones de filtro
Los botones de categoría mostrarán números entre paréntesis:
"Carne (4)", "Vegetariana (3)". Puedes ver inmediatamente cuántos productos hay en cada grupo.
💬 Copia y envía a la IA
En los botones de filtro de categoría agrega un número entre paréntesis — cuántas pizzas hay en cada categoría.
Por ejemplo "Carne (4)". En el botón "Todas" muestra el total de todos los productos.
6Indicador de envío gratis en el carrito
En la parte inferior del carrito aparecerá una línea: "Para envío gratis: $18.50".
Agrega artículos — la cantidad disminuye. Al llegar a $50 — la línea cambia a
"🎉 ¡Tienes envío gratis!"
💬 Copia y envía a la IA
En el panel lateral del carrito agrega un indicador de envío gratis.
Umbral — $50. Muestra cuánto falta para agregar. Al alcanzar el umbral —
muestra un mensaje de felicitación. Actualiza cada vez que el carrito cambie.
7Botón "Volver arriba"
Desplázate hacia abajo — aparece un botón redondo ↑ en la esquina inferior derecha.
Presiónalo — la página se desplaza suavemente hacia arriba.
En la parte superior el botón no es visible.
💬 Copia y envía a la IA
Agrega un botón "volver arriba" en todas las páginas en la esquina inferior derecha.
Aparece después de desplazarse 300px y se oculta cuando la página está en la parte superior.
Al hacer clic — desplazamiento suave hacia arriba. El estilo debe coincidir con el esquema de colores del sitio.
8Cantidad de artículos en el título de la pestaña
El título de la pestaña del navegador mostrará la cantidad de artículos:
"(3) PizzaShop — Menú". Agrega un artículo — el número se actualiza.
El carrito está vacío — sin paréntesis.
💬 Copia y envía a la IA
Haz que la cantidad de artículos del carrito aparezca en el título de la pestaña del navegador.
Por ejemplo "(3) PizzaShop — Menú". El número debe actualizarse cuando
agregas o eliminas productos. Cuando el carrito está vacío — el título es normal sin paréntesis.
9Modo oscuro y claro
Apareció un botón 🌙 / ☀️ en el encabezado. Presiónalo — el sitio
cambió a diseño claro. Presiónalo de nuevo — volvió el oscuro. Al recargar
se guardó el modo.
💬 Copia y envía a la IA
Agrega un botón de alternancia de modo oscuro/claro 🌙/☀️ al encabezado en todas las páginas.
Al presionar — todo el sitio cambia a diseño claro. Al presionar de nuevo — vuelve el oscuro.
El modo seleccionado debe guardarse al cerrar y reabrir el navegador.
10Animación de agregar al carrito
Presiona "+ Agregar al carrito" — el botón se puso
verde con el texto "✓ Agregado" por un segundo, luego volvió a la normalidad.
El icono del carrito en el encabezado rebotó.
💬 Copia y envía a la IA
Cuando se hace clic en el botón "+ Agregar al carrito" — hazlo verde con texto "✓ Agregado"
por un segundo, luego vuelve a la normalidad.
El icono del carrito en el encabezado también debe rebotar levemente en ese momento.
11Calificación con estrellas
En las tarjetas de producto y en la ventana modal en lugar del número de calificación —
estrellas amarillas ★★★★☆. El número de estrellas rellenas
coincide con la calificación del producto.
💬 Copia y envía a la IA
En las tarjetas de producto y en la ventana de detalle — reemplaza el número de calificación con estrellas amarillas
★★★★☆. El número de estrellas rellenas debe coincidir con la calificación.
12Agregar campo Email al formulario de pedido
En la página de pago el campo Email se volvió obligatorio.
No se puede enviar el formulario sin él. Con formato inválido — un borde rojo
con el texto "Por favor ingresa un email válido".
💬 Copia y envía a la IA
En la página de pago haz el campo Email obligatorio. Si no está relleno —
no se puede enviar el formulario. Si se ingresa algo que no parece un email (sin @ o punto)
— resalta el campo en rojo con el mensaje "Por favor ingresa un email válido".
13Nueva página "Envío"
Apareció un nuevo enlace "Envío" en la navegación.
En la página — zonas de entrega, costo, plazos y condiciones de envío gratis.
El encabezado y pie de página coinciden con las otras páginas.
💬 Copia y envía a la IA
Crea una nueva página delivery.html con el mismo encabezado y pie de página que las demás
páginas del sitio. Agrega un enlace "Envío" al menú en todas las páginas.
Contenido de la página: zonas de entrega en la ciudad, costo ($5), gratis desde $50,
tiempo de entrega 30–45 minutos.
14Botón "Agregar a favoritos"
Cada tarjeta de producto tendrá un botón ♡.
Presiónalo — el corazón se vuelve rojo ♥ y la pizza se agrega a favoritos.
Al recargar la página los corazones permanecen en su lugar.
💬 Copia y envía a la IA
Agrega un botón de corazón ♡ a cada tarjeta de producto. Al presionar — el corazón
se vuelve rojo ♥ y el producto se agrega a favoritos. Al presionar de nuevo — se elimina de
favoritos. La lista de favoritos debe guardarse en el navegador — al recargar
la página los corazones en las tarjetas correctas permanecen rellenos.
15Agregar un nuevo producto a la página de ofertas
La página de ofertas tenía 3 productos — ahora hay 4.
El nuevo producto se muestra con la insignia "🔥 Oferta" como los demás.
💬 Copia y envía a la IA
En la página "Ofertas" actualmente hay tres productos. Agrega uno más —
elige cualquier pizza del catálogo que quieras incluir en la oferta.
16Monto mínimo de pedido
El botón "Realizar pedido" en el carrito se desactiva cuando
el total es menos de $10. Debajo del botón — el texto
"Pedido mínimo: $10". Al alcanzar el monto requerido — el botón se activa.
💬 Copia y envía a la IA
Haz que el botón "Realizar pedido" en el carrito se desactive cuando el total
es menos de $10. Debajo del botón debe aparecer un texto: "Pedido mínimo: $10".
Al alcanzar el monto requerido — el botón vuelve a activarse.
17La búsqueda se guarda al recargar
Escribiste texto en la búsqueda, seleccionaste una categoría y orden — recargaste la página.
Todo permaneció: mismo texto en el buscador, mismo botón de filtro
presionado, misma opción de orden seleccionada.
💬 Copia y envía a la IA
Guarda el texto de búsqueda, la categoría seleccionada y la opción de orden seleccionada en el navegador.
Al recargar la página — todo sigue igual: mismo texto,
mismo botón de filtro presionado, misma opción de orden seleccionada.
18Productos relacionados en el modal
En la ventana modal del producto apareció una sección
"Productos relacionados" en la parte inferior — 3 tarjetas de la misma categoría.
Haz clic en uno — el modal se actualiza y muestra el producto seleccionado.
💬 Copia y envía a la IA
Al abrir una tarjeta de producto en la ventana emergente — agrega una sección "Productos relacionados"
en la parte inferior con tres otras pizzas de la misma categoría.
Haz clic en una de ellas — la ventana se actualiza y muestra el producto seleccionado.
19Historial de pedidos
Después de un pago exitoso el pedido se guarda.
En la página de pago en una sección "Mis pedidos" puedes ver
una lista de pedidos anteriores: fecha, número y total.
💬 Copia y envía a la IA
Después de cada pago exitoso guarda el pedido en la memoria del navegador.
Agrega una sección "Mis pedidos" a la página de pago con el historial:
fecha, número de pedido y total. Si aún no se han realizado pedidos — no mostrar la sección.
20
Análisis de vulnerabilidades del sitio
Realiza un análisis de seguridad del sitio (sin explotación).
Califica el nivel de seguridad en una escala de 10 puntos y explica brevemente la calificación.
💬 Copia y envía a la IA
Analiza el sitio en busca de vulnerabilidades y califícalo en una escala de diez puntos.