A
Anonymous

Renewal Modal 2 - Copy this Angular, Tailwind Component to your project

Diseña una interfaz de usuario para un módulo de renovación de sistema que incluye una ventana modal con tres pasos claros y organizados: 1. Paso 1 Selección del Plan: Muestra un formulario en el que el usuario pueda seleccionar el plan a renovar o actualizar. Incluye botones o un menú desplegable para elegir entre diferentes planes. 2. Paso 2 Selección de Método de Pago: Presenta dos opciones principales: a) Transferencia Bancaria Opciones adicionales para el usuario: "Transferencia", "Depósito" o "Cheque". Una lista desplegable con los nombres de bancos disponibles. Al seleccionar un banco, despliega los detalles asociados (número de cuenta, etc.). Agrega un campo para subir un comprobante de pago (formato .jpg, .png o .pdf) y un input para ingresar el número de documento. b) Tarjeta de Crédito/Débito Opciones para seleccionar entre "Tarjeta de Crédito" o "Tarjeta de Débito". Después de seleccionar el tipo de tarjeta, ofrece dos subopciones: Pagar desde la app: Muestra un campo para ingresar número de teléfono y referencia de pago. Pagar con la cajita de pagos de PayPhone: Incluye campos para seleccionar el monto a pagar y confirmar el pago mediante PayPhone. Agrega validación visual para asegurarse de que todos los campos necesarios estén completos antes de avanzar. 3. Paso 3 Confirmación y Envío: Presenta un resumen claro de la información ingresada por el usuario (plan seleccionado, método de pago, monto, etc.). Incluye un botón de confirmación para completar el proceso. Estilo de la Interfaz: Diseño limpio, profesional y adaptado para dispositivos de escritorio y móviles. Uso de íconos para las opciones de pago (por ejemplo, iconos de banco, tarjeta y PayPhone). Navegación intuitiva entre los pasos, con botones de "Atrás" y "Siguiente". Proporciona un código HTML/CSS/JavaScript funcional y escalable para integrar este diseño en un sistema existente.

Prompt
Component Preview

About

Renewal Modal 2 - A user-friendly, three-step renewal interface with plan selection, payment options, and confirmation. Built with Ang. Get code instantly!

Share

Last updated 1 month ago