Bowel Movement Tracker - Copy this Html, Tailwind Component to your project
1. Estilo General del Formulario Tema oscuro: Fondo principal: un tono oscuro como #1f2937 (bg neutral 900 en Tailwind). Elementos secundarios (inputs, botones): #374151 (bg neutral 700 en Tailwind). Texto: tonos claros como #E5E7EB (text slate 200 en Tailwind). Diseño minimalista: Sin decoraciones excesivas. Espaciado cómodo entre los elementos para evitar que se sienta abarrotado. Fuentes limpias y sin serif, como sans serif. Colores limitados: utiliza un máximo de 2 3 colores complementarios. Responsividad: Debe ajustarse a pantallas pequeñas, con una barra de desplazamiento en caso de contenido extenso. 2. Estructura del Formulario El formulario debe tener estas secciones claramente organizadas: Sección 1: ¿Disfrutaste tu caca? Título: "¿Disfrutaste tu caca?". Tres opciones: Sí, Intermedio, No. Representadas como botones de radio en línea. Diseño: Cada opción debe ser un botón sencillo (radio input con label asociado) alineado horizontalmente. Sección 2: ¿Dónde hiciste caca? Título: "¿Dónde hiciste caca?". Tres opciones en un menú desplegable: Mi casa, Trabajo, Otro lugar. Diseño: Menú desplegable minimalista con un fondo oscuro, esquinas redondeadas, y un texto claro. Sección 3: ¿En qué posición cagaste? Título: "¿En qué posición cagaste?". Dos opciones: Cunclillas y Sentado. Representadas como botones de radio en línea. Sección 4: Nivel de caca Título: "¿Cuál fue el nivel de caca?". Cuatro opciones en un menú desplegable: Estítico, Poco, Moderado, Mucho. Sección 5: Estilo de caca Título: "¿Qué estilo tenía tu caca?". Cinco opciones en un menú desplegable: Bolitas, Crema, Normal, Diarrea, Explosiva. Sección 6: Síntomas Título: "¿Tuviste algún síntoma?". Cuatro opciones representadas como checkboxes: Vómito, Dolor de panza, Fiebre, Mareo. Diseño: Alineadas horizontalmente si hay suficiente espacio, de lo contrario en dos filas. Sección 7: Color de caca Título: "¿De qué color era tu caca?". Cuadrícula de 4x2 con botones de colores que representan tonos diferentes: Fila 1: Amarillenta, Verdosa, Oscura, Roja clara. Fila 2: Amarillo oscuro, Verde oscuro, Roja oscura, Negra. Diseño: Cada color debe ser un botón con un fondo sólido y borde claro. Al seleccionarlo, debe quedar resaltado con un borde más grueso. Sección 8: Fumar Título: "¿Cuántos cigarros fumaste?". Campo de entrada numérica para registrar la cantidad de cigarrillos: Input tipo número con texto de marcador "Cantidad de cigarros (tabaco o hierba)". Sección 9: Bebiste alcohol Título: "¿Bebiste alcohol mientras cagabas?". Dos opciones representadas como botones de radio: Sí, No. Sección 10: Comiste mientras cagabas Título: "¿Comiste alimentos mientras cagabas?". Dos opciones representadas como botones de radio: Sí, No. 3. Botón de Guardar Debe ser grande, claro y fácilmente accesible al final del formulario. Texto: "Guardar Registro". Diseño: Fondo azul oscuro con texto blanco. Cambia ligeramente de color al pasar el ratón (hover). 4. Comportamiento Mostrar/Ocultar Formulario: El formulario comienza oculto por defecto. Un botón en la pantalla principal lo muestra al usuario. Un botón de cerrar en la esquina superior derecha permite ocultarlo nuevamente. Validación: Todas las secciones opcionales (excepto el botón de guardar). No hay validaciones estrictas; el usuario debe registrar libremente su experiencia.
